Vue.js中有哪些實現組件通信的方式

這期內容當中小編將會給大家帶來有關Vue.js中有哪些實現組件通信的方式，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

什么是Vue組件？

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

Vue組件間通信

父組件向子組件通信

方法一：props

使用 props ，父組件可以使用props向子組件傳遞數據。

父組件vue模板father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

子組件vue模板child.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

方法二 使用$children

使用 $children 可以在父組件中訪問子組件。

子組件向父組件通信

方法一:使用 vue事件

父組件向子組件傳遞事件方法，子組件通過$emit觸發事件，回調給父組件。

父組件vue模板father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

子組件vue模板child.vue

<template>
  <button @click="handleClick">點我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

方法二： 通過修改父組件傳遞的props來修改父組件數據

這種方法只能在父組件傳遞一個引用變量時可以使用，字面變量無法達到相應效果。因為飲用變量最終無論是父組件中的數據還是子組件得到的props中的數據都是指向同一塊內存地址，所以修改了子組件中props的數據即修改了父組件的數據。

但是并不推薦這么做，并不建議直接修改props的值，如果數據是用于顯示修改的，在實際開發中我經常會將其放入data中，在需要回傳給父組件的時候再用事件回傳數據。這樣做保持了組件獨立以及解耦，不會因為使用同一份數據而導致數據流異常混亂，只通過特定的接口傳遞數據來達到修改數據的目的，而內部數據狀態由專門的data負責管理。

方法三：使用$parent

使用 $parent 可以訪問父組件的數據。

非父子組件、兄弟組件之間的數據傳遞

非父子組件通信，Vue官方推薦 使用一個Vue實例作為中央事件總線 。

Vue內部有一個事件機制，可以參考 源碼 。

$on方法用來監聽一個事件。

$emit用來觸發一個事件。

/*新建一個Vue實例作為中央事件總嫌*/
let event = new Vue();
/*監聽事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*觸發事件*/
event.$emit('eventName', 'this is a message.');

多層級父子組件通信：

在Vue1.0中實現了$broadcast與$dispatch兩個方法用來向子組件（或父組件）廣播（或派發），當子組件（或父組件）上監聽了事件并返回true的時候會向爺孫級組件繼續廣播（或派發）事件。但是這個方法在Vue2.0里面已經被移除了。

之前在學習餓了么的開源組件庫 element 的時候發現他們重新實現了broadcast以及dispatch的方法，以mixin的方式引入，具體可以參考 《說說element組件庫broadcast與dispatch》 。但是跟Vue1.0的兩個方法實現有略微的不同。這兩個方法實現了向子孫組件事件廣播以及向多層級父組件事件派發的功能。但是并非廣義上的事件廣播，它需要指定一個commentName進行向指定組件名組件定向廣播（派發）事件。

其實這兩個方法內部實現還是用到的還是$parent以及$children，用以遍歷子節點或是逐級向上查詢父節點，訪問到指定組件名的時候，調用$emit觸發指定事件。

復雜的單頁應用數據管理

當應用足夠復雜情況下，請使用 vuex 進行數據管理。

上述就是小編為大家分享的Vue.js中有哪些實現組件通信的方式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。