vue中跨组件$bus的运用,组件间通信

21 阅读1分钟

在父子组件中进行事件传递使用的是emit,但当事件传递需要跨组件的时候可以使用emit,但当事件传递需要跨组件的时候可以使用bus

在mian.js内全局注册

// $bus 事件总线的导入  
Vue.prototype.$bus = new Vue()

和$emit一样,向外传递

this.$bus.$emit("xxxx",data)

接收

this.$bus.$on("xxxx", (data) => {
    });

组件销毁时取消挂载


export default {
  name: 'LeaderBoard',
  mounted: {
   this.$bus.$on('xxxx', Data / () => { // 第一个参数事件的名字  第二个参数 Data 要接收的数据 没有可以不写
		// 需要操作的事情
	})
  },
  beforeDestroy () {
  	this.$bus.$off('xxxx') // 取消一个
  	this.$bus.$off() // 取消全部
  }
}
</script>