在main.js中,new VUE里beforeCreate()函数中写Vue.prototype.$bus = this; 如下
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
beforeCreate(){
// 一定要写这里,不然vue加载完事,会把所有的子组件加载完成,这样就会报错,在
// Create()前就要添加,这样就不会报错
// $bus也可以写成别的,但是官方介绍写的这个,意为“公用的,公交车”。
Vue.prototype.$bus = this;
},
});
其中一个子页面(a.vue),可能有点击事件给另一个子页面(b.vue)传值
a.vue页面中点击事件方法@click="handleCheckedCitiesChange"
methods: {
handleCheckedCitiesChange(val) {
this.$bus.$emit('tableVals',val) //tableVals 事件名称,可以随便起名字,val参数
}
},
b.vue页面接收参数
mounted() {
this.$bus.$on('tableVals',(data)=>{
console.log(我接收到',data); //tableVals必须与上面事件名称一致,data位参数
})
},
// 用完记得销毁
beforeDestroy(){
this.$bus.$off('tableVals')
}