【Vue】 组件通信方式

VUE中实现通信的⽅式：

1. props：- 若 父传子：属性值是非函数。- 若 子传父：属性值是函数。
2. emit
3. v-model
4. refs- $refs：父→子。$parent：子→父。
5. provide/inject：祖孙组件直接通信，在祖先组件中通过provide配置向后代组件提供数据，在后代组件中通过inject配置来声明接收数据
6. eventBus
7. vuex/pinia(状态管理⼯具)
8. mitt
   常⻅的是上⾯的这⼏种，少⻅的其实还可以算上插槽 slot， 混⼊，路由携带参数，localStorage， $parent /$children等

1.props
常常使⽤在⽗组件传递給⼦组件通信的过程中，⾸先在⼦组件中使⽤ props，来接收对应的属性，⽽在⽗组件中使⽤⼦组件的地⽅，添加上⾯定义的属性。
2. emit
这个就和上⾯的相反，是使⽤在⼦组件给⽗组件传递值的中。⼦组件中声明对应的事件，当⼦组件触发事件，就会通过this.$emit(‘事件’ , ‘数据’)传递到，⽽在⽗组件中使⽤⼦组件的地⽅，添加上⾯定义的事件，这个可以获取⼦组件传来的值。
3. provide/inject
这对组合往往使⽤在层级⽐较深的时候，⽐如A组件下可能还有 B组件 ，B组件下有C组件…E组件.⽽使⽤这对API，就能⽆论层级有多深都能获取到
4. eventBus
也就是事件总线，简单粗暴，可以到处⻜。可以不管你是不是⽗⼦关系，通过新建⼀个Vue事件bus对象，然后通过 bus.emit 触发事件，bus.on 监听触发的事件。但不建议乱⽤，不好维护。
5. vuex
对于⼤型的项⽬来说往往是很必要的，尤其单⻚⾯应⽤，很多⻚⾯嵌套⻚⾯，关系很多。⽽使⽤ VUEX 就能便捷的统⼀管理。
总结
常⻅的组件通信⽅式有通过 props / emit / provide 和 inject / eventBus / vuex 等，⼀般根据不同的场景来决定使⽤的⽅式。⽐如⽗⼦组件通信使⽤ props ，反过来使⽤ emit 。⽽当层级很多的时候使⽤ provide ，全局的状态管理使⽤ vuex等。