vue组件12种通信方式

Vue3 的 8 种组件通信

1. props
2. $emit
3. expose / ref
4. $attrs
5. v-model
6. provide / inject
7. Vuex
8. mitt

Vue2.x 的12种组件通信

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref
6. $children / $parent
7. $attrs / $listeners
8. provide / inject
9. EventBus
10. Vuex
11. $root
12. slot

父子组件通信可以用：

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

兄弟组件通信可以用：

• EventBus
• Vuex
• $parent

跨层级组件通信可以用：

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

Vue通信使用写法

父向子传递数据 常用的就是props
子组件接收到数据之后不能直接修改父组件的数据, 当父组件重新渲染时 数据会被覆盖 .
如果子组件内要修改的话用computed比较好
prop 只可以从上一级组件传递到下一级组件（父子组件），也就是单向数据流。而且 prop 只读，不能被修改

.sync
父组件向子组件传递数据的双向绑定 子组件接收到的数据可以直接修改 并且会同时修改父组件的数据
vue3中删除了.sync的使用

v-model
和.sync类似 可以实现将父组件传给子组件的数据为双向绑定, 子组件通过$emit修改父组件的数据

ref
ref如果在普通的DOM元素上 指向的就是该DOM元素
如果在子组件上, 引用的指向就是子组件实例, 父组件就可以通过refs主动获取子组件的属性或者调用子组件的方法

$emit / v-on
子组件通过派发事件给父组件数据, 或者触发父组件更新等操作
$emit()——把事件沿着作用域链向上派送
v-on 指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件

$attrs / listeners
多层嵌套组件传递数据 如果只是传递数据,而不做处理的话就用这个

$attrs:包括父作用域里面除了class和style除外的非props属性集合.通过this.$attrs获取父作用域中所有符合条件的属性集合 然后继续传给子组件内部其他的组件 就可以通过v-bind = “$linteners”
$listeners:包括了父作用域里.native除外的监听事件集合.如果还要传给子组件内部的其他组件,可以通过v-on{=}^{\prime }$linteners’

$children / $parent
$children : 获取到所有只包含子组件的VueComponent对象数组, 可以直接拿到子组件中所有的数据和方法等 不包括孙组件
$parent : 获取到一个父节点的VueComponent对象, 同样包含父节点中所有数据和方法等

provide / inject
provide / inject 为依赖注入 , 不推荐直接用于应用程序代码中, 但是在一些插件或组件库里 被常用 避免重复声明props
provide : 可以让我们指定想要提供给后代组件的数据或方法
inject : 在任何后代组件中接收想要添加在这个组件上的数据或方法, 不管组件嵌套多深都可以直接用
这两个传递的数据不是响应式的

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

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

$root
$root 可以拿到APP.vue里面的数据和方法
访问跟组件的属性和方法: $root 只是对根组件有用, 不是父组件, $root 只是对根组件有用

slot
slot就是把子组件的数据通过插槽的方式传给父组件使用, 然后在插回来 就是用来占个坑使用时候将组件之间的内容用来填坑