vueコンポーネント通信--- $ bus

Vueコンポーネント通信-$ bus

$ bus：vueコンポーネント通信の実装の1つ

vue-busをインストールする

npm i vue-bus -S

エントリファイルのvueインスタンスにvue-busをマウントします

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