vue兄弟组件传值的3种方法

1,bus总线传值

2,常规子1传父->父传子2

3,vuex

这里详细说明bus总线传值的总路线及方法:本例为基本用法,如果不理解的可以看下面的详细使用方法:

//bus.js 
import Vue from 'vue';
export default new Vue;
//使用 兄弟A 传值
import bus from '路径'
bus.$emit('自定义事件名称',输出数据)
//使用 兄弟B 接值
import bus from '路径'
bus.on('自定义事件名',(res)=>{})

一. bus总线传值的使用:

1,在项目中创建一个单独的eventBus.js文件

vue兄弟组件传值的3种方法_第1张图片

2,该js文件的内容很简单,就是暴露一个vue实例而已。

vue兄弟组件传值的3种方法_第2张图片

有人喜欢在main.js全局引入该js文件,我一般在需要使用到组件中引入。

 3,创建相关组件:

vue兄弟组件传值的3种方法_第3张图片

4,父组件中注册并使用子组件:

vue兄弟组件传值的3种方法_第4张图片

5,分别在子组件one和two中引入eventBus.js 

vue兄弟组件传值的3种方法_第5张图片

6,one组件向two组件传值:(传值使用$emit)

vue兄弟组件传值的3种方法_第6张图片

7,two组件接收到one组件的值:(接收值使用$on)

vue兄弟组件传值的3种方法_第7张图片 

到这里其实使用bus总线实现兄弟组件之间的传值已经完成。

 

 

 

 

你可能感兴趣的:(VUE,vue.js)