在vue中，父組件向之組件通訊使用的是props，子組件向父組件通訊使用的是$emit+事件，那非父子間的通訊呢，在官方文檔上只有寥寥數筆，

概念很模糊，這個空的vue實例應該放在哪裏呢，光放文檔並沒有明確的描述，經過查證一些其他的資料，發現其實這個非父子間的通訊是這麽用的：

首先，這個空的實例需要放到根組件下，所有的子組件都能調用，即放在main.js下面，如圖所示：

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  data:{
    Hub:new Vue()
  },
  template: ‘<App/>‘,
  components: { App }
});

　　我的兩個組件分別叫做child1.vue,child2.vue，我現在想點擊child1.vue裏面的按鈕來改變child2.vue裏面的數值，這個時候我們需要借助一個$root的工具來實現：

child1.vue:

<template lang="pug">
  div this is child
    span(@click="correspond") 點擊進行非組件之間的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改變")
      }

    }
  }
</script>

child2.vue:

<template lang="pug">
  div this is child2
    span {{message}}
</template>
<script>
  export default{
    data(){
      return {
        message: "初始值"
      }
    },
    created(){
      this.$root.Hub.$on("change", () => {
        this.message = "改變"
      })
    }
  }
</script>

此時就已經可以達到我們想要的效果啦。

vue2.0非父子間進行通訊