1. props/emit: 父子组件双向通信的主要方式,只能传递属性和方法,父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。
> 小结: prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。
2. v-slot 可以实现父子组件单向通信(父向子传值)
3. $children/$parent/$refs/$root 父组件通过 this.children 的方式获取组件列表,要注意得到$parent和$children的值不一样,$children 的值是数组,而$parent是个对象。
4. attrs/listeners 能够实现跨级双向通信
5. provide/inject 父组件中通过 provide 来提供变量,子组件和子代组件通过 inject 拿到父组件定义的属性和方法,主要用于简单的数据通信的方式,如果数据是动态的,如果父组件的数据会被修改,不会触发子组件的渲染。
使用provide/inject:对于更深层次的组件通信,可以使用provide和inject。父组件通过provide提供方法,子组件通过inject注入这些方法。
```js
<!-- 父组件 -->
<script>
export default {
provide() {
return {
parentMethod: this.parentMethod
};
},
methods: {
parentMethod() {
// 父组件的方法
}
}
};
</script>
<!-- 子组件 -->
<script>
export default {
inject: ['parentMethod'],
mounted() {
this.parentMethod();
}
};
</script>
```
6. Eventbus 可以实现全局通信,注册的时候如果使用的不谨慎会导致全局污染和内存泄漏,关闭页面或跳转的时候要及时注销以避免事件的反复注册,不推荐使用。
7. Vuex 可以实现全局通信,是 vue 项目全局状态管理的最佳实践。在项目比较庞大,想要集中式管理全局组件状态时,那么安装 Vuex 准没错。不是持久化数据,刷新页面后vue store 数据不存在。
## 总结
常见使用场景可以分为三类:
- 父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
- 兄弟组件通信: eventBus ; vuex
- 跨级通信: eventBus;Vuex;provide / inject 、$attrs / $listeners