好家伙,
兄弟组件的传值用到Eventbus组件,
1.EventBus的使用步骤
① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象
②在数据发送方,
调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
③ 在数据接收方,
调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件
2.代码如下:
目录结构:
1.首先我们向外共享Vue的实例对象:
import Vue from "vue";
//向外共享Vue的实例对象
export default new Vue()
2.Left.vue组件
我是left组件
我的str数值为:{{ str }}
//将eventbus,js引入
import bus from "./eventbus.js"
export default {
data(){
return{
str:'彦祖点个赞吧'
}
},
methods:{
send(){
//通过Eventbus来发送,(触发事件)
bus.$emit('share',this.str)
}
}
}
3.Right组件
我是Right组价
我的msg数据为:{{ msgfromLeft}}
来看看效果:
点一下按钮:
兄弟组件传值成功.
推荐阅读
发表评论