vue组件通信—非父子之间通信 ($emit与$on)
1、定义空组件(非父子组件通信的前提)
let bus = new Vue({})
2、在组件1中 用$emit自定义事件addnum
bus.$emit(‘addnum’,this.num);
将组件1中的数据传到空组件bus中,并且封装到add函数中,this.num是需要传输的数据
Vue.component('myBtn', {
template: '#mybtn',
data() {
return {
num: 10
}
},
methods: {
add() {
// 2、自定义事件
bus.$emit('addnum', this.num);
}
}
})
3、在组件2中,用$on来从bus中取得数据,并调用自定义addnum事件
Vue.component('myCount', {
template: '#mycount',
data() {
return {
number: 0
}
},
mounted() {
let self =
this;
// 调用自定义addnum事件
bus.$on('addnum', function (result) {
console.log(result);
self.number = self.number + result
console.log(self.number);
})
}
})
注意这里的this必须赋值给一个变量,不然无法传到函数中去
4、在组件1的视图层调用add函数
<template id="mybtn">
<div>
<p>我是mybtn组件</p>
<p> <button @click="add">click count</button> </p>
</div>
</template>
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果