快捷導(dǎo)航

vue中的依賴注入provide和inject簡單介紹

更新時(shí)間：2022年11月06日 11:03:49 作者：螢火之森-Thezero

這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價(jià)刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下

vue中的依賴注入 provide 和 inject

在這里插入圖片描述

provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法。

下面是一個(gè)組價(jià)刷新的案列

<template>
  <div >
    <div class="view">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

然后在任何后代組件里，我們都可以使用 inject 選項(xiàng)來接收指定的我們想要添加在這個(gè)實(shí)例上的屬性：

inject: ['reload']

注：依賴注入所提供的屬性是非響應(yīng)式

vue中的依賴注入provide和inject場(chǎng)景解析（簡單易懂）

本文開始，首先我們來看這兩個(gè)詞的意思，provide：提供 inject：注入

用處：

父組件可以向其所有子組件傳入數(shù)據(jù)，而“不管子組件層次結(jié)構(gòu)有多深（非父子和父子咱都能傳）”

特性：

父組件有一個(gè)provide選項(xiàng)來提供數(shù)據(jù)

子組件有一個(gè)inject選項(xiàng)來開始使用這個(gè)數(shù)據(jù)

本文參考組件層級(jí)：

Index組件

\ A組件

\ B組件

代碼區(qū)：

場(chǎng)景1：我想要Index組件直接給b組件傳值

Index組件代碼：

<template>
  <div>
    <div>我是index組件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {}
  },
  provide: {
    text: '我是父組件的provide信息666'
  }
}
</script>

<style></style>

接收的B組件代碼：

<template>
  <div>
    <div>我是B組件</div>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['text']
}
</script>

<style></style>

當(dāng)然，provide還有第二種寫法，寫成函數(shù)的形式

Index組件代碼：

<template>
  <div>
    <div>我是index組件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {
      arr: ['1', '2', '3']
    }
  },
  // provide: {
  //   text: '我是父組件的provide信息666'
  // }
  provide() {
    return {
      arr: this.arr
    }
  }
}
</script>

<style></style>

B組件代碼：

<template>
  <div>
    <div>我是B組件</div>
    <div>{{ msg }}</div>
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['arr']
}
</script>

<style></style>

運(yùn)行截圖：