Vue组件传值之bus总线
版权申诉
173 浏览量
2021-01-08
17:41:17
上传
评论
收藏 29KB PDF 举报
Vue组件传值之组件传值之bus总线总线
引言引言
在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我
们介绍另一种组件传值的方式——Bus总线
正文正文
使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
方法一：方法一：
在组件一中引入
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
methods: {
....
Bus.$emit('log', 0)
}
}
组件二
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
mounted () {
Bus.$on('log', content => {
console.log(content)
});
}
}
但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信，
因此我们可以直接将Bus注入到根对象中：
方法二：方法二：
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子组件中通过this.$root.Bus.$on()，this.$root.Bus.$emit()来调用
作者：taeyang61
评论0
最新资源