Vue组件通信

参考笔记：面试官：Vue 组件之间的通信方式都有哪些？

🍇含义和目的

含义：发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。

组件通信的目的：要让共享的数据互相之间进行通讯。

组件间通信的分类可以分成以下：

1. 父子组件之间的通信
2. 兄弟组件之间的通信
3. 祖孙与后代组件之间的通信
4. 非关系组件之间的通信

方式：

• 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
• 祖先与后代组件数据传递可选择 Provide与 inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量

🍈组件间通信的方案

整理vue中8种常规的通信方案

1. props 和 $emit
2. EventBus
3. parent或root
4. attrs 与 listeners
5. Provide 与 Inject
6. Vuex或Pinia

🍖props 和 $emit

props（父传子）

• 子组件设置props属性，定义接收父组件传递过来的参数
• 父组件在使用子组件标签中通过字面量来传递值

$emit（子传父）

• 子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
• 父组件绑定监听器获取到子组件传递过来的参数

🍗ref

• 父组件在使用子组件的时候设置ref
• 父组件通过设置子组件ref来获取数据

🥩EventBus

兄弟组件通信

• 创建一个中央事件总线EventBus
• 兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
• 另一个兄弟组件通过$on监听自定义事件

🥓parent或root

• 通过共同祖辈$parent或者$root搭建通信桥梁

兄弟组件

this.$parent.on('add',this.add)

另一个兄弟组件

this.$parent.emit('add')

🍔attrs 与 listeners

• 设置批量向下传属性$attrs和 $listeners
• 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
• 可以通过 v-bind="$attrs" 传⼊内部组件

🍟provide 与 inject

• 在祖先组件定义provide属性，返回传递的值
• 在后代组件通过inject接收组件传递过来的值

🍕Vuex或Pinia

Vuex或Pinia都是Vue的状态管理库

两者的区别在pinia的官方文档上也有一些介绍。总结一下：

1. 语法糖与灵活性：

   1. Pinia的语法更接近Vue 3的组合式API，使得状态管理更加直观和简洁。
   2. Vuex的语法较为繁琐，尤其是在使用模块时。

2. 性能优化：

   1. Pinia利用Vue 3的Reactivity系统自动追踪依赖，减少不必要的渲染。
   2. Vuex的依赖追踪可能不如Pinia高效，尤其是在复杂的状态变化场景中。

链接：juejin.cn/post/739428…

🍉总结

• 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量