Vue3的8种和Vue2的12种组件通信，值得收藏

如有不对的或者遗漏的，欢迎指正，你的一赞一评都是我前行最大的动力，感谢
Vue2.x组件通信12种方式写在后面了，先来 Vue3 的
奥力给！

Vue3 组件通信方式

1.props
2. $e mi t 3. e x p ose / re f 4.$ attrs
5.v-model
6.provide / inject
7.Vuex
8.mitt
Vue3 通信使用写法
在这里插入图片描述

注意：
如果父组件是setup()，子组件setup 语法糖写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性
如果父组件是setup 语法糖写法，子组件setup()方法写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性
官方也说了，既然用了 3，就不要写 2 了，所以不推荐setup()方法写法。下面的例子，一律只用语法糖的写法
在这里插入图片描述

7. Vuex/Pinia
Pinia 详细使用方式，我写过一篇文章，也不搬过来了

8. mitt
Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus
1.先安装 npm i mitt -S
2.然后像以前封装 bus 一样，封装一下
在这里插入图片描述

Vue2.x 通信使用写法

下面把每一种组件通信方式的写法一一列出
1. props
父组件向子组件传送数据，这应该是最常用的方式了
子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed
在这里插入图片描述
2. .sync
可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

3. v-model
和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据
在这里插入图片描述
4. ref
ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

5. $emit / v-on
子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作
在这里插入图片描述

7. $children / $parent
$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等
$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等
在这里插入图片描述

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

11. $root
$root 可以拿到 App.vue 里的数据和方法