快捷導(dǎo)航

vue子組件設(shè)計(jì)provide和inject理解使用

更新時(shí)間：2023年08月11日 11:55:25 作者：大海愛(ài)奔跑

這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

閱讀element-ui源碼，發(fā)現(xiàn)在設(shè)計(jì)子組時(shí)件用到了inject屬性，隨即查了一下官方文檔，得知vue在2.2.0版本里新增了provide / inject：

provide 和 inject 主要在開(kāi)發(fā)高階插件/組件庫(kù)時(shí)使用。并不推薦用于普通應(yīng)用程序代碼中。

按照文檔的描述，我的理解是：在多級(jí)嵌套的組件體系中，某級(jí)外層組件可以通過(guò)provide屬性向其下任意一級(jí)子組件提供一個(gè)依賴，不管層級(jí)有多深；而某級(jí)子組件則可以通過(guò)inject屬性接收來(lái)自其上任意一級(jí)父組件提供的依賴（通過(guò)this.xxx形式獲取）。注意：provide和inject需要一起使用。

舉個(gè)例子說(shuō)明

清朝三位皇帝：康熙（玄燁）、雍正（胤禛）、乾?。ê霘v）是祖孫三代，我們用vue組件的思想表示他們之間的關(guān)系，并模擬他們的一段對(duì)話，以此理解vue中的provide和inject。

調(diào)用組件

——大清帝國(guó)：qing-dynasty.vue

<!--組件的嵌套關(guān)系-->
<kangxi>
  <yongzheng>
    <qianlong></qianlong>
  </yongzheng>
</kangxi>

定義爺爺組件

——康熙皇帝：kangxi.vue

<template>
  <div class="kangxi">
    康熙皇帝
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'kangxi',
    // 爺爺對(duì)兒子提供‘kangxiToYongzheng'
    // 對(duì)孫子提供‘kangxiToQianlong'
    provide: {
      kangxiToYongzheng: '康熙皇帝對(duì)雍正皇帝說(shuō)："你是我兒子"',
      kangxiToQianlong: '康熙皇帝對(duì)乾隆皇帝說(shuō)："你是我孫子"'
    },
    data () {
      return {}
    }
  }
</script>
<style lang="scss">
.kangxi {
  width: 200px;
  height: 140px;
  text-align: center;
  background-color: #ffb599;
}
</style>

定義兒子組件

——雍正皇帝：yongzheng.vue

<template>
  <div class="yongzheng">
    雍正皇帝
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'yongzheng',
    // 兒子接收父親提供的‘kangxiToYongzheng'
    inject: ['kangxiToYongzheng'],
    // 同時(shí)，兒子也給孫子提供‘yongzhengToQianlong'
    provide: {
      yongzhengToQianlong: '雍正皇帝對(duì)乾隆皇帝說(shuō)："你是我兒子"'
    },
    data () {
      return {}
    },
    created () {
      // 可以通過(guò)this獲取
      console.log(this.kangxiToYongzheng, ' 雍正皇帝回答："是的，爸爸"')
    }
  }
</script>
<style lang="scss">
  .yongzheng {
    width: 160px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    background-color: #84b5ff;
  }
</style>

// 打印結(jié)果

康熙皇帝對(duì)雍正皇帝說(shuō)："你是我兒子" 雍正皇帝回答："是的，爸爸"

定義孫子組件

——乾?。簈ianlong.vue

<template>
  <div class="qianlong">
    乾隆皇帝
  </div>
</template>
<script>
  export default {
    name: 'qianlong',
    // 孫子接收爺爺?shù)摹甼angxiToQianlong'、父親的‘yongzhengToQianlong'
    inject: ['kangxiToQianlong', 'yongzhengToQianlong'],
    data () {
      return {}
    },
    created () {
      // 可以通過(guò)this獲取
      console.log(this.kangxiToQianlong, ' 乾隆皇帝回答："是的，爺爺"')
      console.log(this.yongzhengToQianlong, ' 乾隆皇帝回答："是的，爸爸"')
    }
  }
</script>
<style lang="scss">
.qianlong {
  width: 120px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  background-color: blanchedalmond;
}
</style>

// 打印結(jié)果