Vue 的父子组件通信可以直接通过 组件上的事件来进行通信,而兄弟组件中间要通信则不是那么容易。
如果是复杂的应用,需要通过专门数据管理框架 Vuex 来实现,如果是比较简单的应用则需要通过中央事件总线来实现。
中央事件总线
原理就是通过一个空的 Vue 实例 ,然后 A 组件 定义在 中的事件 , 然后在要触发事件的兄弟组件 B 中 同一个事件
来看具体的代码:
首先定义 Vue 实例
然后在组件A引入 后,通过 触发一个事件:
然后在组件B中触发相同的事件
改进
这样的确定是每个需要通信的组件都需要引入 ,所以希望能够一次注入,随处使用
要用到 这个 api,也就是每个组件都可以通过这个组件访问根组件,所以在定义 Vue 实例的入口处将 导入,然后在使用时通过 来访问它
在 main.js 中
组件A中
组件B中
通过原型
Vue 对象本质上就是一个 JS 对象,想要引入 只需要在 Vue 的原型 上增加一个属性就可以了。本质上所有的 Vue 组件都是继承全局的 Vue,所以只要在初始化 Vue 对象之前在 上定义属性,这样所有的组件都可以访问这个属性了。
所以在 main.js 中,在实例化 Vue 之前增加代码
组件A中
组件B中
参考
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/a5534789/article/details/53415201
https://blog.csdn.net/wy01272454/article/details/77756079
领取专属 10元无门槛券
私享最新 技术干货