vue 兄弟元件之間傳值之bus

wh_xmy發表於2018-07-09
Vue元件

有時候兩個元件也需要通訊（非父子關係）。當然Vue2.0提供了Vuex，但在簡單的場景下，可以使用一個空的Vue例項作為中央事件匯流排。

參考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1

例子：https://segmentfault.com/q/1010000007491994

<div id="app">
    <c1></c1>
    <c2></c2>
</div>
 

var Bus = new Vue(); //為了方便將Bus（空vue）定義在一個元件中，在實際的運用中一般會新建一Bus.js
Vue.component('c1',{ //這裡已全域性元件為例，同樣，單檔案元件和區域性元件也同樣適用
template:'<div>{{msg}}</div>',
  data: () => ({
    msg: 'Hello World!'
  }),
  created() {
    Bus.$on('setMsg', content => { 
      this.msg = content;
    });
  }
});
Vue.component('c2',{
  template: '<button @click="sendEvent">Say Hi</button>',
  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});
var app= new Vue({
    el:'#app'
})

在實際運用中，一般將Bus抽離出來:

Bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

元件呼叫時先引入

元件1


import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },

  }

元件2


import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
　　　Bus.$on('log', content => { 
      console.log(content)
    });
 }, 
}

但這種引入方式，經過webpack打包後可能會出現Bus區域性作用域的情況，即引用的是兩個不同的Bus，導致不能正常通訊

 實際運用二（推薦）：

當然也可以直接將Bus注入到Vue根物件中，


import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

在子元件中通過this.$root.Bus.$on(),this.$root.Bus.$emit()來呼叫

相關文章