了解 Vue 工程化开发中的组件通信

目录

1. 组件通信语法

1.1. 什么是组件通信?

1.2. 为什么要使用组件通信?

1.3. 组件之间有哪些关系(组件关系分类)?

1.4. 组件通信方案有哪几类 ?

2. 父子通信流程图

3. 父传子

3.1. 父传子核心流程props

4. 子传父

4.1. 子传父核心流程$emit

5. prop 介绍

5.1. prop 定义

5.2. prop 作用

5.3. prop 特点

5.4. prop 练习

6. props 校验

6.1. 问题引入(思考)

6.2. props 校验的作用

6.3. props 校验的语法

7. prop 与 data,单向数据流

7.1. prop 与 data的共同点

7.2. prop 与 data的区别

7.3. 单向数据流介绍

7.4. 口诀

8. 非父子 (拓展)-event bus 事件总线

8.1. event bus 事件总线的作用

8.2. event bus 事件总线的步骤

9. 非父子 (拓展)-provide 与 inject

9.1. provide 与 inject 的作用

9.2. provide 与 inject 的步骤


 

1. 组件通信语法

1.1. 什么是组件通信?

  • 组件通信, 就是指 组件与组件 之间的数据传递

1.2. 为什么要使用组件通信?

  • 组件的数据是独立的,无法直接访问其他组件的数据
  • 想用其他组件的数据,就需要组件通信

1.3. 组件之间有哪些关系(组件关系分类)?

  • 父子关系
  • 非父子关系

1.4. 组件通信方案有哪几类 ?

 

2. 父子通信流程图

  • 父组件通过 props 将数据传递给子组件
  • 子组件利用 $emit 通知父组件修改更新

3. 父传子

父组件通过 props 将数据传递给子组件

3.1. 父传子核心流程props

  • 父组件中给子组件添加属性传值
  • 子组件props 接收
  • 子组件使用

 

4. 子传父

子组件利用 $emit 通知父组件,进行修改更新

4.1. 子传父核心流程$emit

  • 子组件$emit 发送消息
  • 父组件中给子组件添加消息监听
  • 父组件中实现处理函数

 

5. prop 介绍

5.1. prop 定义

  • 组件上 注册的一些 自定义属性

5.2. prop 作用

  • 向子组件传递数据

5.3. prop 特点

  • 可以 传递 任意数量 的prop
  • 可以 传递 任意类型 的prop

5.4. prop 练习

 

6. props 校验

6.1. 问题引入(思考)

  • 组件的 prop 可以乱传吗?

6.2. props 校验的作用

  • 为组件的 prop 指定验证要求,不符合要求,控制台就会有错误提示

目的:帮助开发者,快速发现错误

6.3. props 校验的语法

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

类型校验的语法

Props 校验的完整语法

 

7. prop 与 data,单向数据流

7.1. prop 与 data的共同点

  • 都可以给组件提供数据

7.2. prop 与 data的区别

  • data 的数据是自己的,可以随便改
  • prop 的数据是外部的,不能直接改,要遵循 单向数据流

7.3. 单向数据流介绍

  • 父级 prop 的数据更新,会向下流动,影响子组件

这个数据流动是单向的

7.4. 口诀

  • 谁的数据谁负责

 

8. 非父子 (拓展)-event bus 事件总线

8.1. event bus 事件总线的作用

  • 非父子组件之间,进行简易消息传递

复杂场景 → Vuex

8.2. event bus 事件总线的步骤

  • 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js

  • A 组件(接收方),监听 Bus 实例的事件

  • B 组件(发送方),触发 Bus 实例的事件

 

9. 非父子 (拓展)-provide 与 inject

9.1. provide 与 inject 的作用

  • 跨层级共享数据

9.2. provide 与 inject 的步骤

  • 父组件 provide 提供数据

  • 子/孙组件 inject 取值使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/544471.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

1. 信息存储

系列文章目录 信息的表示和处理 : Information Storage(信息存储)Integer Representation(整数表示)Integer Arithmetic(整数运算)Floating Point(浮点数) 文章目录 系列文章目录前…

网络网络层之(2)ARP协议

网络网络层之(2)ARP协议 Author:Once Day Date: 2024年4月1日 漫漫长路,有人对你笑过嘛… 全系列文档可参考专栏:通信网络技术_Once-Day的博客-CSDN博客。 参考文档: 《TCP/IP详解卷一》arp(8) - Linux manual page (man7.org)彻底搞懂系…

专业照片编辑软件ON1 Photo RAW 2024 mac/win

ON1 Photo RAW 2024 for Mac是一款集专业性与易用性于一体的照片编辑软件。它拥有简洁直观的用户界面,即便对于摄影新手,也能快速上手。软件支持RAW格式照片处理,能够完整保留照片原始信息,让后期调整更加灵活。 在功能方面&#…

利用Sentinel解决雪崩问题(一)流量控制

1、解决雪崩问题的常见方式有四种: 超时处理:设定超时时间,请求超过一定时间没有响应就返回错误信息,不会无休止等待;舱壁模式:限定每个业务能使用的线程数,避免耗尽整个tomcat的资源,因此也叫线程隔离;熔断降级:由断路器统计业务…

Textarea的常用属性thymeleaf

文章目录 textareathymeleaf1.基础使用2.代码块的切换3.链接表达式1)范例 4.前后端5.遍历1.th:each2.th:switch3.添加属性 组件替换 每周总结 textarea -webkit-scrollbar:width:0;让滚动条隐藏,宽度为0 resize&#x…

浦大喜奔APP8.0智能升级,发力数字金融深化五大金融篇章服务

1. 浦大喜奔立足科技赋能持续迭代升级,筑牢用户体验护城河 浦发信用卡中心坚持数字科技与客户体验双轮驱动,以科技赋能发展,优化整体系统性能,全方位支撑浦大喜奔 APP提高线上客户服务能力与体验,积极服务民生消费&a…

【MATLAB源码-第188期】基于matlab的64QAM系统相位偏移估计EOS算法仿真,对比补偿前后的星座图误码率。

操作环境: MATLAB 2022a 1、算法描述 1. 引言 M-QAM调制技术的重要性 现代通信系统追求的是更高的数据传输速率和更有效的频谱利用率。M-QAM调制技术,作为一种高效的调制方案,能够通过在相同的带宽条件下传输更多的数据位来满足这一需求…

大模型面试准备(十八):使用 Pytorch 从零实现 Transformer 模型

节前,我们组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学,针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

Kafka 架构深入探索

目录 一、Kafka 工作流程及文件存储机制 二、数据可靠性保证 三 、数据一致性问题 3.1follower 故障 3.2leader 故障 四、ack 应答机制 五、部署FilebeatKafkaELK 5.1环境准备 5.2部署ELK 5.2.1部署 Elasticsearch 软件 5.2.1.1修改elasticsearch主配置文件 5.2…

MacOS Docker 部署 Solr 搜索引擎

一、简介 Solr 是 Apache 下的一个顶级开源项目,采用 Java 开发,它是基于 Lucene 的全文搜索服务器。Solr 可以独立运行在 Jetty、Tomcat 等这些 Servlet 容器中。Solr 提供了比 Lucene 更为丰富的查询语言,同时实现了可配置、可扩展&#x…

Kafka 简单介绍

目录 一 消息队列(MQ) 1,为什么需要消息队列(MQ 2,常见的 MQ 中间件 3,MQ 传统应用场景之异步处理 4,使用消息队列的好处 5,消息队列的两种模式 5.1点对点模式&#xf…

Spring Bean的生命周期总结(包含面试题)

目录 一、Bean的初始化过程 1. 加载Spring Bean 2. 解析Bean的定义 3. Bean属性定义 4. BeanFactoryPostProcessor 扩展接口 5. 实例化Bean对象 6. Aware感知 7. 初始化方法 8. 后置处理 9. destroy 销毁 二、Bean的单例与多例模式 2.1 单例模式(Sin…

Vue入门:天不生Vue,前端万古如长夜 - Vue从入门到放弃

👋 Vue环境搭建 首先,搭一个打代码的环境 1.安装node.js 在使用VS Code之前,需要安装Vue的开发环境。 安装Vue的最简单方法是使用npm包管理器,先安装Node.js和npm。 node官网 ​​ 2.配置环境变量 在nodejs安装目录下新建…

51单片机实验03-单片机定时/计数器实验

目录 一、实验目的 二、实验说明 1、51单片机有两个16位内部计数器/定时器(C/T, Counter/Timer)。 2、模式寄存器TMOD 1) M1M0工作模式控制位; 2) C/T定时器或计数器选择位: 3)GATE定时器/计数器运行…

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测(完整源码…

【算法】实验室2024年二面纳新题复盘

实验室2024年二面纳新题复盘 P1258 小车问题 原题链接: P1258 小车问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 小车问题 题目描述 甲、乙两人同时从 A 地出发要尽快同时赶到 B 地。出发时 A 地有一辆小车,可是这辆小车除了驾驶员外只能带一人。…

Spring Cloud学习笔记:Eureka集群搭建样例

这是本人学习的总结,主要学习资料如下 - 马士兵教育 1、项目架构2、Dependency3、项目启动类4、application.yml5、启动项目 1、项目架构 因为这是单机模拟集群搭建,为了方便管理就都放在了一个项目中。这次准备搭建三个项目server1, server2, server3 …

特征工程(V)--时间序列特征

有这么一句话在业界广泛流传:数据和特征决定了机器学习的上限,而模型和算法只是逼近这个上限而已。由此可见,特征工程在机器学习中占有相当重要的地位。在实际应用当中,可以说特征工程是机器学习成功的关键。 特征工程是数据分析…

计算机服务器中了rmallox勒索病毒怎么办,rmallox勒索病毒解密流程步骤

在企业的生产运营过程中网络发挥着巨大作用,利用网络可以拓宽市场,提高办公效率,网络为企业的生产运营提供了极大便利,但也为企业的数据安全带来隐患。近日,云天数据恢复中心接到多家企业的求助,企业的计算…

GNU Radio Radar Toolbox编译及安装

文章目录 前言一、GNU Radio Radar Toolbox 介绍二、gr-radar 安装三、具体使用四、OFDM 雷达仿真 前言 GNU Radio Radar Toolbox(gr-radar)是一个开放源码的工具箱,用于 GNU Radio 生态系统,主要目的是为雷达信号处理提供必要的…