Vue中组件之间的通信方式

Vue3组建通信的方式有8种

1. props 父相子传值
2. $emit 子向父传值
3. expose / ref 父组件获取子组件的属性或者调用子组件方法
4. v-model 可以支持多个数据双向绑定
5. provide / inject 为依赖注入

provide：可以让我们指定想要提供给后代组件的数据或

inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

6. Vuex
7. mitt

Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

Vue2.组件通信方式有12种

1. props 父组件向子组件传送数据。子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed
2. $emit / v-on 子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作
3. .sync 可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
4. v-model 和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据
5. ref ref 如果在普通的DOM元素上，引用指向的就是该DOM元素; 如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法
6. $children / $parent

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent
对象数组，可以直接拿到子组件中所有数据和方法等

`$parent`：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

7.$attrs / $listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时 $attrs：包含父作用域里除class和style除外的非props属性集合。通过this.$attrs
获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind=“$attrs”
$listeners：包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过v-on="$linteners"

8.provide / inject

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide
里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

9.EventBus EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作

10.Vuex Vuex 是状态管理器，集中式存储管理所有组件的状态。

父子组件通信可以用：

• props
• $emit / v-on
• $attrs / $listeners
• ref
• .sync
• v-model
• $children / $parent

兄弟组件通信可以用：

• EventBus
• Vuex
• $parent

跨层级组件通信可以用：

• provide/inject
• EventBus
• Vuex
• $attrs / $listeners
• $root