vue之间的传值问题---5.事件总线 $emit $on $off
兄弟页面的数据互传
// bus.js
//写着两段就可以了
import Vue from 'vue'
// export default new Vue();
// 总线,一些组件间简单的数据交流通过它来进行
const bus = new Vue();
export default bus;
//父节点
<A>
<B>
在需要传递的页面引入(这里举例B向A页面传递值)
//B页面
import EventBus from './bus.js';
export default {
methods:{
toPage(){
let data = 80
EventBus.$emit('fullYearAge', data ) //定义方法名,通过$emit传递
}
}
}
//A页面
import EventBus from './transferStation.js';
export default {
created(){
EventBus.$on('fullYearAge', (value) => { //通过方法名接收
console.log(value)
})
},
//离开页面记得移除自定义事件监听器。防止$on多次触发,需要$off进行销毁。
beforeDestroy() {
EventBus.$off('fullYearAge')
},
}