快捷導(dǎo)航

vue2.0/3.0中provide和inject的用法示例

更新時(shí)間：2021年09月08日 15:19:09 作者：大鵬_yp

provide和inject是成對(duì)出現(xiàn)的,主要用于父組件向子孫組件傳遞數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2.0/3.0中provide和inject用法的相關(guān)資料,需要的朋友可以參考下

1、provide/inject有什么用？

常用的父子組件通信方式都是父組件綁定要傳遞給子組件的數(shù)據(jù)，子組件通過props屬性接收，一旦組件層級(jí)變多時(shí)，采用這種方式一級(jí)一級(jí)傳遞值非常麻煩，而且代碼可讀性不高，不便后期維護(hù)。

vue提供了provide和inject幫助我們解決多層次嵌套嵌套通信問題。在provide中指定要傳遞給子孫組件的數(shù)據(jù)，子孫組件通過inject注入祖父組件傳遞過來的數(shù)據(jù)。

使用場(chǎng)景：由于vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實(shí)現(xiàn)跨級(jí)訪問祖先組件的數(shù)據(jù)

2、provide/inject使用方式

　　provide：是一個(gè)對(duì)象 / 返回對(duì)象的函數(shù)。

　　　　　　里面是屬性和屬性值。

　　注意：子孫層的provide會(huì)掩蓋祖父層provide中相同key的屬性值

　　inject：一個(gè)字符串?dāng)?shù)組，或者是一個(gè)對(duì)象。

　　　　　屬性值可以是一個(gè)對(duì)象，包含from和default默認(rèn)值，from是在可用的注入內(nèi)容中搜索用的 key (字符串或 Symbol)，意思就是祖父多層provide提供了很多數(shù)據(jù)，from屬性指定取哪一個(gè)key;

　　　　default指定默認(rèn)值。

具體用法：

父組件

<template>
  <div>
 
  </div>
</template>

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

// 父組件中返回要傳給下級(jí)的數(shù)據(jù)  可以使函數(shù)，也可以是data中的數(shù)據(jù)
  provide () {
    return {
      reload: this.reload　　　　isShow:this.isShow
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

子孫

<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>將被分配給</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      指派
    </a>
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法 內(nèi)容 isShow
  inject: ['reload','isShow'],
  components: {
    PopupAssign
  },
methods: {
    async successHandle () {
      this.reload()
    }
  }
}
</script>