$off, $on, $emit for communication of vue cli components

The first step is to introduce and mount the global method in the mian.js file

import Vue from 'vue'
/* 挂载全局方法 */
Vue.prototype.$eventBus = new Vue();

 The second part is to create a monitoring method in the file component that needs to be monitored. Generally, mount the monitoring in mounted or created. Here you need to pay attention to the method name to be consistent with $emit

this.$eventBus.$on(方法名字,data =>{
				//监听触发回调
console.log(data); //这里的data就是$emit传递过来的参数
			})

The third step is to create a sending method in the file component that needs to send notifications

this.$eventBus.$emit(方法名字,参数对象形式)

The fourth step is to monitor the page. Remember to close the monitor when the page is hidden or left, otherwise it will trigger multiple times. Add $off in the beforeDestroy cycle

beforeDestroy() {
			this.$eventBus.$off(方法名字);
		},

 

Guess you like

Origin blog.csdn.net/qq_37564189/article/details/115330110