1. 非vuex实现 非父组件之间的通信

原理是:在父组件或者全局创建一个事件仓储eventHub,然后通过$emit 和 $on 实现通信

1.1 通过在window上绑定eventHub的Vue实例对象,具体实现方法如下:

目录结构

Vue学习之路(九) --- 非父组件之间的通信Vue学习之路(九) --- 非父组件之间的通信

在绑定eventHub实例对象之前需要import Vue from ‘vue’,然后根组件中使用window.eventHub = new Vue()

Vue学习之路(九) --- 非父组件之间的通信

在cartControl子组件通过$emit发送通信,在shopcart里通过$on接收通信
Vue学习之路(九) --- 非父组件之间的通信
Vue学习之路(九) --- 非父组件之间的通信

1.2通过在根组件中的main.js中注册事件仓储

在main.js中创建事件仓储后,直接在data中绑定eventHub,然后就可以在子组件通过this.$root.eventHub访问到事件仓储

Vue学习之路(九) --- 非父组件之间的通信Vue学习之路(九) --- 非父组件之间的通信Vue学习之路(九) --- 非父组件之间的通信

相关文章: