Vue组件之间数据通信之 Bus事件总线
利用new 一个新的vue实例,可以轻松实现组件之间数据通信。方法1 新创建一个Bus的js模块// Bus.jsimport Vue from 'vue'const Bus = new Vue()export default Bus// 组件Com1import Bus from './Bus'export default {data() {...
·
利用new 一个新的vue实例,可以轻松实现组件之间数据通信。
方法1 新创建一个Bus的js模块
// Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件Com1
import Bus from './Bus'
export default {
data() {
return {
val: 0
}
},
methods: {
changeVal(){
this.val += 10;
Bus.$emit('val', this.val)
}
},
}
// 组件Com2
import Bus from './Bus'
export default {
data() {
return {
val: 0
}
},
mounted () {
Bus.$on('val', data => {
this.val = data;
});
}
}
// 点击组件1,就可以改变组件2中的值。
方法2 直接将Bus对象挂载到Vue根实例上
import Vue from 'vue'
const Bus = new Vue()
const app= new Vue({
el:'#app',
data:{
Bus
}
router,
store
});
// 组件中使用
this.$root.Bus.$on()
this.$root.Bus.$emit()
更多推荐
已为社区贡献11条内容
所有评论(0)