目錄

• 1、provide/inject有什麼用？
  
• 2、provide/inject使用方式
  
• 具體用法：
• 3.0用法
• 總結

1、provide/inject有什麼用？

常用的父子元件通訊方式都是父元件繫結要傳遞給子元件的資料，子元件通過props屬性接收，一旦元件層級變多時，採用這種方式一http://www.cppcns.com級一級傳遞值非常麻煩，而且程式碼可讀性不高，不便後期維護。

vue提供了provide和inject幫助我們解決多層次巢狀巢狀通訊問題。在provide中指定要傳遞給子孫元件的資料，子孫元件通過inject注入祖父元件傳遞過來的資料。

使用場景：由於vue有$parent屬性www.cppcns.com

2、provide/inject使用方式

　　provide：是一個物件 / 返回物件的函式。

　　　　　　 裡面是屬性和屬性值。

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

　　inject：一個字串陣列，或者是一個物件。

　　　　　屬性值可以是一個物件，包含from和default預設值，from是在可用的注入內容中搜索用的 key (字串或 Symbol)，意思就是祖父多層provide提供了很多資料，from屬性指定取哪一個key;

　　　　default指定預設值。

具體用法：

父元件

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

<script>
export default {
  components: {
    MergeTipDialog,BreakNetTip
  },data () {
    return {
      isShow: false,isRouterAlive: true
  },// 父元件中返回要傳給下級的資料  可以使函式，也可以是data中的資料
  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方法 內容 isShow
  inject: ['reload','isShow'],components: {
    PopupAssign
  },methods: {
    async successHandle () {
      this.reload()
    }
  }
}
</script>

vue3.0用法

父元件

子元件

總結

到此這篇關於vue2.0/3.0中provide和inject用法的文章就介紹到這了,更多相關vue中provide和inject用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！