vue-cli兄弟组件传值文章

1.创建两个兄弟组件分别是header.vue组件和middle.vue组件

1.创建一个父组件chuanzhi.vue

父子组件结构如下:

vue-cli兄弟组件传值文章_第1张图片
vue-cli兄弟组件传值文章_第2张图片

2.在src文件夹下新建子文件夹model, 在文件夹model新建 VueEvent.js

vue-cli兄弟组件传值文章_第3张图片

3.在header文件中写入事件,点击发送通过$emit给兄弟组件middle

vue-cli兄弟组件传值文章_第4张图片


4.兄弟组件middle进行接收通过$on

vue-cli兄弟组件传值文章_第5张图片

5.页面效果展示,未发送之前

vue-cli兄弟组件传值文章_第6张图片

6.页面效果展示,点击发送之后

vue-cli兄弟组件传值文章_第7张图片

启发自:https://www.jianshu.com/p/69d53063be7c

顺便拿下哥们总结:

总结:

1.新建一个js文件,然后引入vue 实例化vue 最后暴露这个实例

2.在要广播的地方引入刚才定义实例

3.通过vueEmit.$emit('名称',‘数据’)

4.在接收数据 

VueEmite.$on('名称',function(){

})

你可能感兴趣的:(vue-cli兄弟组件传值文章)