baozhengrui

导航

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')
    },
	
}




posted on 2024-10-14 14:30  芮艺  阅读(8)  评论(0编辑  收藏  举报