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

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

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

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

目录结构

这里写图片描述这里写图片描述

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

这里写图片描述

在cartControl子组件通过$emit发送通信,在shopcart里通过$on接收通信
这里写图片描述
这里写图片描述

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

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

这里写图片描述这里写图片描述这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章