vue的provide和inject特性

由來

組件之間的通信可以通過props和$emit的方式進行通信，但是如果組件之間的關係非常複雜的話，通過以上的方式會很麻煩，並且程序會非常脆弱，沒有建中性可言。

在vue2.2.0 中新增provide和inject屬性，可以方便的幫助我們進行組件間的傳值。

使用的方式很簡單：
父組件通過provide提供數據，其他組價可以使用inject注入數據。

注意

不推薦直接用於應用程序代碼中。一般使用的場景是自定義組件庫的時候，底層組件之間需要通信的時候使用。

provide 和 inject 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。

特點

這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

格式

provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。

inject 選項應該是：

• 一個字符串數組
• 或 一個對象，對象的 key 是本地的綁定名（自定義的一個名字），value 是：
  在provide傳過來的值(字符串或 Symbol)，或
  一個對象，該對象的：
  from 屬性是provide傳過來的 (字符串或 Symbol)
  default 屬性是降級情況下使用的 value

示例：

父組件

<template>
  <div>
    <h1>HelloWorld</h1>
    <One></One>
  </div>
</template>

<script> import One from "./One"; export default { components: { One }, // provide: { // for: "這是父組件的provide" // } provide() { return { for: "這是父組件的provide" }; } }; </script>

子組件1：

<template>
  <div>
    <h2>childOne組件</h2>
    {{demo}}
    <Two></Two>
  </div>
</template>

<script> import Two from "./Two.vue"; export default { name: "One", // inject: ["for"], inject: { for: { default: () => ({}) } }, data() { return { demo: this.for }; }, components: { Two } }; </script>

子組件2：

<template>
  <div>
    <h2>childtwo組件</h2>
    {{demo}}
  </div>
</template>

<script> export default { name: "Two", // inject: ["for"], inject: { for: { default: () => ({}) } }, data() { return { demo: this.for // demo: "childTwo" }; } }; </script>

此時，兩個子組件均會收到父組件傳遞的數據：