vue兄弟组件传值的3种方法
1,bus总线传值2,常规子1传父->父传子23,vuex这里详细说明bus总线传值的总路线及方法:本例为基本用法,如果不理解的可以看下面的详细使用方法://bus.jsimport Vue from 'vue';export default new Vue;//使用 兄弟A 传值import bus from '路径'bus.$emit('自定义事件名称',输出数据)//使用 兄弟B 接值
·
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文件
2,该js文件的内容很简单,就是暴露一个vue实例而已。
有人喜欢在main.js全局引入该js文件,我一般在需要使用到组件中引入。
3,创建相关组件:
4,父组件中注册并使用子组件:
5,分别在子组件one和two中引入eventBus.js
6,one组件向two组件传值:(传值使用$emit)
7,two组件接收到one组件的值:(接收值使用$on)
到这里其实使用bus总线实现兄弟组件之间的传值已经完成。
更多推荐
已为社区贡献2条内容
所有评论(0)