非父子组件传值

分别新建两个组件,分别是组件Child.vue和组件ChildBrother.vue,然后挂载在根组件App.vue中,这两个组件相当于兄弟组件。
根组件App.vue:
非父子组件传值
非父子组将传值的主要方法就是:
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
新建一个文件夹model,在文件夹的目录下新建一个js文件,名为spread.js,spread.js主要代码如下:
非父子组件传值
2、在要广播的地方引入刚才定义的实例
现在分别在组件Child.vue和组件ChildBrother.vue引入刚才定义的实例
import spread from ‘…/model/spread.js’

3.通过 VueEmit.$emit(‘名称’,‘数据’)
现在就用组件Child.vue向组件ChildBrother.vue传值
组件Child.vue:
非父子组件传值
4.然后组件ChildBrother.vue要监听Child.vue给它传值的内容
非父子组件传值
点击按钮,效果如下显示:
非父子组件传值
总结:
非父子组件传值