vue之间的传值问题---5.事件总线 $emit $on $off

baozhengrui / 2024-10-15 / 原文

// bus.js
//写着两段就可以了
import Vue from 'vue'
export default new Vue();


在需要传递的页面引入(这里举例B向A页面传递值)

//B页面
import EventBus from './transferStation.js';
export default {
	methods:{
		toPage(){
			let data = 80
			transferStation.$emit('fullYearAge', data ) //定义方法名,通过$emit传递
		}
	}
}


//A页面
import EventBus from './transferStation.js';
export default {
	created(){
		transferStation.$on('fullYearAge', (value) => { //通过方法名接收
            console.log(value)
        })
	},
	
	//离开页面记得移除自定义事件监听器。防止$on多次触发,需要$off进行销毁。
	beforeDestroy() {
        transferStation.$off('fullYearAge')
    },
	
}