Vue跨組件可響應通信【provide / inject】

props 屬性傳遞數據
自定義事件 event
a. 全局的eventHub機制
b. 父組件調用子組件使用 @eventName="handleFunc"，子組件在需要的時候調用 this.$emit(eventName, params) 即可通過 params 傳參。
ref 給元素或組件註冊引用信息，然後父組件通過 this.$refs.child 獲取到子組件實例對象。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素。
$parent / $children：訪問父 / 子實例。

但以上這些方法一般只適合在父子組件中通信，無法在跨級或兄弟間通信，或者要實現跨級通信會很麻煩，需要一層一層的傳遞。

我們知道，在做 Vue 大型項目時，可以使用 Vuex 做狀態管理來突破跨組件的數據共享，它是一個專爲 Vue.js 開發的狀態管理模式，用於集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

那不使用 Vuex 的情況下，我們能否有其他跨組件的通信方式呢？答案是肯定有的，這就需要Vue內置的 provide / inject 接口，它可以實現無依賴的組件通信方法，類似於react的 Context共享數據, 父組件與【子孫】組件而不只是子組件共享數據，可以跨層級。

provide / inject 是 Vue.js 2.2.0 版本後新增的 API，在文檔中這樣介紹：

https://cn.vuejs.org/v2/api/#provide-inject
這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

並且文檔中有如下提示：

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

看不懂上面的介紹沒有關係，不過上面的這句提示應該明白，就是說 Vue.js 不建議在業務中使用這對 API，而是在插件 / 組件庫中使用。不過建議歸建議，如果你用好了，這個 API 會非常有用。

先來看一下這個 API 怎麼用，假設有兩個組件： A.vue 和 B.vue，B 是 A 的子組件。

// A.vue
export default {
  provide: {
    name: 'Spring'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Spring
  }
}

可以看到，在 A.vue 裏，我們設置了一個 provide: name，值爲 Spring，它的作用就是將 name 這個變量提供給它的所有子組件。而在 B.vue 中，通過 inject 注入了從 A 組件中提供的 name 變量，那麼在組件 B 中，就可以直接通過 this.name 訪問這個變量了，它的值也是 Spring。這就是 provide / inject API 最基本的用法。

需要注意的是：

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

所以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 Spring。

那如何才能實現 可響應 的通信呢？

3. provide / inject 可響應通信

下面介紹使用方法：
1、在父組件中給 provide 選項返回一個對象或對象函數：

<template>
    <div>
        <input v-model="staticValue" />
        <input v-model="staticObject.value" />
        <children />
    </div>
</template>

<script>
	import Children from "./components/Children.vue";
	export default {
	    name: "Parent",
	    data() {
	        return {
	            staticValue: "func spring",
	            staticObject: {value: "obj spring"}
	        };
	    },
	    provide() {
	        return {
	            staticValue: this.staticValue, // 直接返回值，不可響應
	            staticObject: this.staticObject, // 返回一個對象，可響應
	            getReactiveValue: () => this.staticValue // 返回一個對象的函數，可響應
	        }
	    },
	    components: {
	    	Children
	    }
</script>

2、在子組件中（單純的演示，只做銜接父組件和孫組件）：

<template>
    <div>
        <grand-son />
    </div>
</template>

<script>
import GrandSon from "./components/GrandSon.vue";
export default {
    name: "Children",
    data() {
        return {};
    },
    components: {
    	GrandSon
    }
};
</script>

3、在孫組件中：

<template>
    <div>
        <h2>staticValue：{{ staticValue }}</h2>
        <h2>reactiveFuncValue: {{ reactiveValue }}</h2>
        <h2>reactiveObjValue：{{ staticObject.value }}</h2>
    </div>
</template>

<script>
export default {
	name: "GrandSon",
    inject: ["staticValue", "getReactiveValue", "staticObject"],
    computed: {
        reactiveValue() {
            return this.getReactiveValue(); // 返回注入的對象函數，通過計算屬性來監聽值的變化
        },
    }
};
</script>

這樣子我們就是實現了跨組件的可響應通信：

4. provide / inject 替代 Vuex

瞭解了 provide / inject 的用法，下面來看怎樣替代 Vuex。當然，我們的目的並不是爲了替代 Vuex，它還是有相當大的用處，這裏只是介紹另一種可行性。

使用 Vuex，最主要的目的是跨組件通信、全局數據維護、多人協同開發。需求比如有：用戶的登錄信息維護、通知信息維護等全局的狀態和數據。

一般在 webpack 中使用 Vue.js，都會有一個入口文件 main.js，裏面通常導入了 Vue、VueRouter、iView 等庫，通常也會導入一個入口組件 app.vue 作爲根組件。一個簡單的 app.vue 可能只有以下代碼：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {

  }
</script>

使用 provide / inject 替代 Vuex，就是在這個 app.vue 文件上做文章。

我們把 app.vue 理解爲一個最外層的根組件，用來存儲所有需要的全局數據和狀態，甚至是計算屬性（computed）、方法（methods）等。因爲你的項目中所有的組件（包含路由），它的父組件（或根組件）都是 app.vue，所以我們把整個 app.vue 實例通過 provide 對外提供。

app.vue：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    provide () {
      return {
        app: this
      }
    }
  }
</script>

上面，我們把整個 app.vue 的實例 this 對外提供，命名爲 app（這個名字可以自定義，推薦使用 app，使用這個名字後，子組件不能再使用它作爲局部屬性）。

接下來，任何組件（或路由）只要通過 inject 注入 app.vue 的 app 的話，都可以直接通過 this.app.xxx 來訪問 app.vue 的 data、computed、methods 等內容，而且因爲注入的app是對象，所以也是 可響應 的。

app.vue 是整個項目第一個被渲染的組件，而且只會渲染一次（即使切換路由，app.vue 也不會被再次渲染），利用這個特性，很適合做一次性全局的狀態數據管理，例如，我們將用戶的登錄信息保存起來：

app.vue，部分代碼省略：

<script>
  export default {
    provide () {
      return {
        app: this
      }
    },
    data () {
      return {
        userInfo: null
      }
    },
    methods: {
      getUserInfo () {
        // 這裏通過 ajax 獲取用戶信息後，賦值給 this.userInfo，以下爲僞代碼
        $.ajax('/user/info', (data) => {
          this.userInfo = data;
        });
      }
    },
    mounted () {
      this.getUserInfo();
    }
  }
</script>

這樣，任何頁面或組件，只要通過 inject 注入 app 後，就可以直接訪問 userInfo 的數據了，比如：

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app']
  }
</script>

是不是很簡單呢。除了直接使用數據，還可以調用方法。比如在某個頁面裏，修改了個人資料，這時一開始在 app.vue 裏獲取的 userInfo 已經不是最新的了，需要重新獲取。可以這樣使用：

某個頁面：

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 這裏修改完用戶數據後，通知 app.vue 更新，以下爲僞代碼
        $.ajax('/user/update', () => {
          // 直接通過 this.app 就可以調用 app.vue 裏的方法
          this.app.getUserInfo();
        })
      }
    }
  }
</script>

同樣非常簡單。只要理解了 this.app 是直接獲取整個 app.vue 的實例後，使用起來就得心應手了。想一想，配置複雜的 Vuex 的全部功能，現在是不是都可以通過 provide / inject 來實現了呢？

5. 進階技巧

如果你的項目足夠複雜，或需要多人協同開發時，在 app.vue 裏會寫非常多的代碼，多到結構複雜難以維護。這時可以使用 Vue.js 的混合 mixins，將不同的邏輯分開到不同的 js 文件裏。

比如上面的用戶信息，就可以放到混合裏：

user.js：

export default {
  data () {
    return {
      userInfo: null
    }
  },
  methods: {
    getUserInfo () {
      // 這裏通過 ajax 獲取用戶信息後，賦值給 this.userInfo，以下爲僞代碼
      $.ajax('/user/info', (data) => {
        this.userInfo = data;
      });
    }
  },
  mounted () {
    this.getUserInfo();
  }
}

然後在 app.vue 中混合：

app.vue：

<script>
  import mixins_user from '../mixins/user.js';

  export default {
    mixins: [mixins_user],
    data () {
      return {

      }
    }
  }
</script>

這樣，跟用戶信息相關的邏輯，都可以在 user.js 裏維護，或者由某個人來維護，app.vue 也就很容易維護了。

6. 結語

如果你顧忌 Vue.js 文檔中所說，provide / inject 不推薦直接在應用程序中使用，那沒有關係，仍然使用你熟悉的 Vuex 或 Bus 來管理你的項目就好。本文介紹的這對 API，主要還是在 獨立組件 中發揮作用的。

只要一個組件使用了 provide 向下提供數據，那其下所有的子組件都可以通過 inject 來注入，不管中間隔了多少代，而且可以注入多個來自不同父級提供的數據。需要注意的是，一旦注入了某個數據，比如上面示例中的 app，那這個組件中就不能再聲明 app 這個數據了，因爲它已經被父級佔有。

所以，使不使用還是要看實際的業務需求，所有能滿足業務相關的技術和技巧都可以擇優選用。

Vue跨組件可響應通信【provide / inject】

目錄

Vue-router的使用和一些技巧

Vue .sync 語法糖

Nuxt項目支持import寫法的三種解決方案

PHP常用SQLite數據庫操作類

JS事件級別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結