Vue组件通信

什么是组件通信

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

⚫ 组件的数据是 独立 的，无法直接访问其他组件的数据。

⚫ 想用其他组件的数据 → 组件通信

不同的组件关系 和 组件通信方案分类

组件关系分类：

1. 父子关系

2. 非父子关系

 

什么是 prop

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

Prop 作用：向子组件传递数据

特点：

⚫ 可以 传递 任意数量 的prop

⚫ 可以 传递 任意类型 的prop

props 校验

作用： 为组件的 prop 指定 验证要求 ，不符合要求，控制台就会有 错误提示 → 帮助开发者，快速发现错误

语法：

① 类型校验

② 非空校验

③ 默认值

④ 自定义校验

prop & data、单向数据流

共同点：都可以给组件提供数据。

区别：

⚫ data 的数据是 自己 的 → 随便改

⚫ prop 的数据是 外部 的 → 不能直接改，要遵循 单向数据流

单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

非父子通信 (拓展) - event bus 事件总线

作用：非父子组件之间，进行简易消息传递。(复杂场景 → Vuex)

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

 2. A 组件(接收方)，监听 Bus 实例的事件

 3. B 组件(发送方)，触发 Bus 实例的事件

 

 

非父子通信 (拓展) - provide & inject

provide & inject 作用： 跨层级 共享数据。

1. 父组件 provide 提供数据

 2. 子/孙组件 inject 取值使用