vue2.0非父子組件間如何進行通訊

這篇文章將為大家詳細講解有關vue2.0非父子組件間如何進行通訊，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在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">
  p this is child
    span(@click="correspond") 點擊進行非組件之間的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改變")
      }

    }
  }
</script>

child2.vue:

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

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

關于vue2.0非父子組件間如何進行通訊就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。