vue中provide和inject 用法

    我們平時在開發的時候，最常用的父子元件通信方式就是父元件綁定要傳遞給子元件的資料，然後子元件通過

props

屬性接收。但是一旦元件層級變多時，采用這種方式一級一級傳遞值非常麻煩，而且代碼可讀性不高，不便後期維護。而且如果父元件内子元件較多，還需要對每一個子元件一一去綁定資料。

    是以

vue

提供了

provide

和

inject

幫助我們解決多層次嵌套嵌套通信問題。在

provide

中指定要傳遞給子孫元件的資料，子孫元件通過

inject就可以

注入祖父元件傳遞過來的資料，不論元件層次有多深，始終生效。

首先來看下兩者的概念：

1. provide

：是一個對象，或者是一個傳回對象的函數。可以将想要傳遞給子孫元件的屬性寫入該對象中。

        注意：若子孫元件中的

provide和父元件中provide提供的key有所相同，那麼子孫元件會覆寫原本父元件的value

2. inject

：一個字元串數組，或 一個對象，對象的 key 是本地的綁定名，value 是： 在可用的注入内容中搜尋用的 key (字元串或 Symbol)，或 一個對象，該對象的： from 屬性是在可用的注入内容中搜尋用的 key (字元串或 Symbol) default 屬性是降級情況下使用的 value

然後看下具體使用的案例：

parent.vue

<template>
  <div>
     這是一代元件
  </div>
</template>

<script>
export default {
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {}
  },

 // 父元件中傳回要傳給下級的資料
  provide () {
    return {
      test:'這是一代元件的資料',
      onChange:()=>{}
    }
  },
  methods: {
   
  }
}
</script>
           

child.vue 

<template>
  <div>
    這是父元件傳遞的{{test}}
  </div>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
 //引用
  inject: ['test'],
  inject: {
      test:{
       from:'test',   // 如果它需要從一個不同名字的屬性注入，則使用 from 來表示其源屬性
       default:'xxxx'
      },
     _change: { // 命名與子元件沖突可以更改别名
      from: 'onChange'
    },
  },
 methods:{
   onChange(){

    }
 }
  
}
</script>

           

 上面就是使用provide和inject 完成的元件之間的傳值

在這裡要注意，祖先元件不知道哪些後代元件使用它提供的屬性 後代元件不知道被注入的屬性來自哪裡，這裡可能會導緻資料比較難追蹤定位，是以不推薦大家随便使用這個。