【Vue】provide/inject實現組件通訊及響應式數據更新

1、provide/inject實現組件通訊

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

inject 選項應該是：一個字符串數組，或一個對象

 

provide/inject是Vue.js2.2.0版本後新增的API：

provide：Object | () => Object//一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。
 inject：Array<string> | { [key: string]: string | Symbol | Object }//一個字符串數組，或一個對象

雖然官方文檔說，provide和inject主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中，可是在插件 / 組件庫（好比 iView，事實上 iView 的不少組件都在用）。不過建議歸建議，若是你用好了，這個 API 會很是有用。

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

注意：provide和inject綁定並非可響應的。這顯然不是設計的失誤，而是刻意的。

下面咱們來看一看它最簡單的用法：

//祖先級組件（上級組件）
<template>
    <div>
        <Pro></Pro>
    </div>
</template>
<script> import Pro from '../components/provide.vue'; export default { data(){ return{ } }, provide:{ foo:'test' }, components:{ Pro, } } </script>
<style scoped>
</style>

//子孫級組件（下級組件）
<template>
    <div>
        <p>{{foo}}</p>
    </div>
</template>
<script> export default { data(){ return { } }, inject:['foo'], } </script>
<style scoped>
</style>

咱們在上級組件中設置了一個provide：foo，值爲test，它的做用就是將foo這個變量提供給它的全部下級組件。而在下級組件中經過inject注入了從上級組件中提供的foo變量，那麼在下級組件中，就能夠直接經過this.foo來訪問了。

再次強調一遍，provide和inject綁定並非可響應的，因此上述例子中上級組件的foo改變了,下級組件的this.foo的值仍是不會改變的。

咱們通常會在main.js中導入app.vue做爲根組件，咱們須要在app.vue上作文章，這就是咱們實現功能的關鍵。咱們能夠這樣理解：app.vue做爲一個最外層的根組件，用來存儲全部須要的全局數據和狀態。由於項目中的全部組件（包含路由），它的父組件（或根組件）都是app.vue，全部咱們能夠把整個app.vue實例經過provide對外提供。那麼，全部的組件都能共享其數據，方法等。

 

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

 

上面，咱們把整個app.vue的實例`this`對外提供，接下來，任何組件（或路由）只要經過`inject`注入app.vue的話，均可以經過this.app.xxx的形式來訪問app.vue的data，computed，method等內容。

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` 來實現了呢？

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

只要一個組件使用了 `provide` 向下提供數據，那其下全部的子組件均可以經過 `inject` 來注入，無論中間隔了多少代，並且能夠注入多個來自不一樣父級提供的數據。須要注意的是，一旦注入了某個數據，好比上面示例中的 `app`，那這個組件中就不能再聲明 `app` 這個數據了，由於它已經被父級佔有。

2、mixins 

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

我先簡單介紹一下什麼是mixins:

混入 (mixin) 提供了一種很是靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被「混合」進入該組件自己的選項。(我的理解mixins就是定義一部分公共的方法或者計算屬性,而後混入到各個組件中使用,方便管理與統一修改)

好比上面的用戶信息，就能夠放到混合裏：

//新建文件(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中混合：

<script> import mixins_user from'../mixins/user.js'; export default { mixins: [mixins_user], data () { return { } } } </script>

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

要深刻了解混入請參照官方文檔：https://cn.vuejs.org/v2/guide/mixins.html

 

3、provide/inject實現響應式數據更新

       3.1問題

前面的例子中，provide和inject綁定並非可響應的，因此上述例子中上級組件的foo改變了,下級組件的this.foo的值仍是不會改變的，但實際使用的時候但願父組件的屬性修改後，子組件能監聽到屬性的修改並執行一些邏輯。

首先假設咱們在祖輩時候傳入進來是個動態的數據，官方不是說若是你傳入了一個可監聽的對象，那麼其對象仍是可響應的麼？

parent父頁面：

export default {
provide() {
   return  { foo: this.fonnB }
  },
  data(){
   return {
    fonnB: 'old word'
   } 
  }
   created() {
   setTimeout(()=>{
    this.fonnB = "new words";  
    // 這裏foo變化了，但子組件得到的foo 依舊是old words
   },1000)
 
  },
 
 }

child子頁面：

export default {
  inject:['foo'],
  data(){
   return {
    childfooOld: this.foo
   } 
  },
  computed:{
    chilrdfoo() {
      return this.foo
    }
  },
 created () {
    console.log(this.foo)
    // -> 'old word'
    setTimeout(() => {
      console.log(this.chilrdfoo); // 這裏計算屬性依舊是old words
    }, 2000);
   }
 }

結果:

經過上面方式，通過驗證，子組件頁面都沒辦法實現響應更新this.foo的值。

3.2實現響應式數據更新：

方法1：

將一個函數賦值給provide的一個值，這個函數返回父組件的動態數據，而後在子孫組件裏面調用這個函數。實際上這個函數存儲了父組件實例的引用，因此每次子組件都能獲取到最新的數據。代碼長下面的樣子：

Parent組件：

<template>
  <div class="parent-container">
   Parent組件
   <br/>
   <button type="button" @click="changeName">改變name</button>
   <br/>
   Parent組件中 name的值: {{name}}
   <Child v-bind="{name: 'k3vvvv'}" />
  </div>
</template>
 
<style scoped>
 .parent-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>
 
<script>
import Child from './Child'
export default {
 name: 'Parent',
 data () {
  return {
   name: 'Kevin'
  }
 },
 methods: {
  changeName (val) {
   this.name = 'Kev'
  }
 },
 provide: function () {
  return {
   nameFromParent: this.name,
   getReaciveNameFromParent: () => this.name
  }
 },
 // provide: {
 // nameFromParent: this.name,
 // getReaciveNameFromParent: () => this.name
 // },
 components: {
  Child
 }
}
</script>

Child組件：

<template>
 <div class="child-container">
  Child組件
  <br/>
  <GrandSon />
 </div>
</template>
<style scoped>
 .child-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>
<script>
import GrandSon from './GrandSon'
export default {
 components: {
  GrandSon
 }
}
</script>

GrandSon組件：

<template>
 <div class="grandson-container">
  Grandson組件
  <br/>
  {{nameFromParent}}
  <br/>
  {{reactiveNameFromParent}}
 </div>
</template>
<style scoped>
 .grandson-container {
  padding: 30px;
  border: 1px solid burlywood;
 }
</style>
<script>
export default {
 inject: ['nameFromParent', 'getReaciveNameFromParent'],
 computed: {
  reactiveNameFromParent () {
   return this.getReaciveNameFromParent()
  }
 },
 watch: {
  'reactiveNameFromParent': function (val) {
   console.log('來自Parent組件的name值發生了變化', val)
  }
 },
 mounted () {
  console.log(this.nameFromParent, 'nameFromParent')
 }
}
</script>

結果:

來自於reactiveNameFromParent ，隨着祖先組件變化而變化了

 方法2：

 

 

所以咱們給provide的屬性傳入一個可監聽的"對象"fonnB，那麼fonnB的屬性是可響應的：

parent頁面：

export default {

    provide(){
     return   {foo:this.fonnB}
    },
    data(){
      return {
      fonnB:{a:'old word'}
      }   
    }
     created() {
      setTimeout(()=>{
        this.fonnB.a="new words";    
       
      },1000)

    },
    
  }

child頁面：

export default {
    inject:['foo'],
    data(){
      return {
       childfooOld:this.foo.a
      }   
    },
    computed:{
        chilrfoo(){
            return  this.foo.a
        }
    }    
  }

 

轉自：https://blog.csdn.net/liuhua_2323/article/details/94780849

響應式參考：

方法1：https://www.jb51.net/article/172018.htm 

方法2:https://www.mk2048.com/blog/blog_hbh2iih0hj.html