vue组件通讯---$bus

vue组件通讯—$bus

$bus: vue组件通讯实现之一

安装vue-bus

npm i vue-bus -S

在入口文件中将vue-bus挂载到vue实例中

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

组件A中：

  methods: {
    
    
    getFooterItem(val) {
    
    
      // val是参数，使用$bus将toItem定义为全局方法 默认参数为val
      this.$bus.$emit('toItem', val)
    }

组件B中：

mounted() {
    
    
	this.$bus.$on('toItem', (data) => {
    
    
		// 在生命周期mounted中监听toItem，只要A组件触发了$bus，在B组件中就可以监听的到，data为传来的val值
		console.log(data)
	})
}