Vue組件通信入門之Provide和Inject機制

前言

Vue中父組件到子組件的通信主要由子組件的props屬性實現。但是在一些情況下，父組件無法直接向子組件的props傳值。比如子組件通過父組件的slot進入父組件，父組件根本不知道子組件是誰，更不用說用子組件的props了。這時應該怎么辦呢？Vue在2.2.0版本引入了provide與inject，正好適合處理這一情況。

什么是provide與inject

用文檔的話說：

provide/inject需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

這就是說從父組件的provide屬性傳入一個對象，子組件（或者是孫組件，只要是子級組件）可以用inject屬性接收父組件的provide屬性。比如

// main.vue
<template>
  <c1 message="hello world">
    <c2></c2>
  </c1>
</template>
 
// c1.vue
<template>
 <div id="c1">
  <slot></slot>
 </div>
</template>
 
<script>
export default {
 props: ['message'],
 provide () {
  return {
   message: this.message
  }
 }
}
</script>
 
// c2.vue
<template>
 <div id="c2">
   {{ message }}
 </div>
</template>
 
<script>
export default {
 inject: ['message']
}
</script>

上面的main組件會被渲染為:

<div id="c1">
 <div id= "c2">hello world</div>
</div>

可以看到，c1組件在不清楚子組件是什么的情況下，將它的props中的message傳給了c2組件。在這里c1組件就像是一個數據源一樣，為子組件提供數據。但是，c1組件提供的數據僅在c1的子孫組件中可見，因此可以算作是有作用域限定的數據源。

父到子孫組件方向的數據流

父到子孫組件方向是provide/inject機制設計時的數據流方向。我們可能會猜想，在父組件中更改provide的值，子組件會響應式的發生改變。但是注意到文檔中話。

提示：provide和inject綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。

這意味著，如果provide的值不是可監聽對象時，在父組件中更改provide的值，子組件不會發生任何變化。比如模板仍然為上面那個例子的模板，message的值是一個props屬性，不是可監聽對象，如果我們在c1的mounted鉤子函數里改變message的值。如:

// c1.vue
<script>
export default {
 //...
 mounted () {
  setTimeout( () => {
   this.message = 'Opps, it would not be rendered'
  }, 1000)
 }
}
</script>

子組件不會響應修改后的值。

但是如果provide的值是一個可監聽對象呢？請看一下例子：

<script>
// c1.vue
export default {
 data () {
  return {
   message: 'hello world'
  }
 },
 provide () {
  messageData: this.$data
 },
 mounted () {
  setTimeout(() => {
   this.message = 'I can show in c2.'
  }, 10000)
 }
}
</script>
 
// c2.vue
<template>
 <div id="c2">
  {{ messageData.message }}
 </div>
</template>
 
<script>
export default {
 inject: ['messageData']
}
</script>

此時在c1掛載10s后，子組件將會顯示I can show in c2。為什么呢？c2中messageData實際上就是c1實例的this.$data。而this.$data上有message的響應式getter與setter。所以c2的視圖會被message的dep收集，因此在c1中更新message，c2的視圖也會更新。

縱觀整個過程，provide/inject機制是非響應式的，即provide與inject之間沒有綁定。具體的值是在子組件初始化過程中決定的。

總結

provide/inject提供了一種新的組件間通信的方法。它允許父組件向子孫組件間進行跨層級的數據分發。但是provide/inject是非響應式的，如果要子孫組件根據父組件的值進行改變，provide/inject機制不是一個好的選擇。此時可以使用Vuex來管理狀態。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。