使用SoapUI测试webservice接口详细步骤
289
2023-02-15
vue 使用eventBus实现同级组件的通讯
新创建一个vue实例用于调度事件的绑定和发送
可以做到同级组件相互通讯,传递参数,点击第一个组件会修改第二个组件的label值,点击第二个组件会修改第二个组件的label值
// 使用一个vue实例 作为事件的载体,用于绑定事件和处理发送事件,作为调度中心
let eventBus = new Vue()
let one = {
template: '
data() {
return {
val: 0
}
},
created() {
//为one绑定事件,如果two_click事件发生了,则执行回调函数
eventBus.$on('two_click',
(val) => {
// 这个this 指的是one的vue实例
this.val = val
}
)
},
methods: {
click() {
// 如果one被点击了,则发送一个one_click的事件,并传递一个参数
eventBus.$emit('one_click', 11)
}
}
}
let two = {
template: '
data() {
return {
val: 0
}
},
created() {
eventBus.$on('one_click',
(val) => {
this.val = val
})
},
methods: {
click() {
eventBus.$emit('two_click', 22)
}
}
}
new Vue({
el: '#app',
components: {
one,
two
}
})
总结
以上所述是给大家介绍的vue 使用eventBus实现同级组件的通讯,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~