快捷導(dǎo)航

vue2和vue3中provide/inject的基本用法示例

更新時(shí)間：2023年04月23日 11:15:34 作者：wyy愛(ài)學(xué)習(xí)

Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過(guò)props或事件來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下

前言

昨天看一個(gè)項(xiàng)目代碼看到了provide，但是學(xué)習(xí)的時(shí)候也沒(méi)看到，看了官網(wǎng)才知道vue還有這個(gè)API。多數(shù)情況下，provide會(huì)和inject一起使用，又叫“依賴(lài)注入”。

“依賴(lài)注入”主要是解決父子組件傳值“props逐級(jí)傳遞”問(wèn)題。所以，provide/inject的作用就是組件間的傳值。

vue2基本用法：

1.provide

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

寫(xiě)在祖先組件中，用于提供給子組件可以注入的值。組件的關(guān)系為a-b-c-d

在a組件中將參數(shù)num進(jìn)行傳遞

export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      num: this.num,
    };
  },
};

2.inject

inject為：一個(gè)數(shù)組，數(shù)組元素為注入的變量

一個(gè)對(duì)象，key為注入的變量，value為一個(gè)包含form和default的對(duì)象
num: {
   from: 'num',
   default: '20'
}

在d組件中接收注入的變量

寫(xiě)法一：

export default {
  inject: ["num"],
};

寫(xiě)法二：

export default {
  inject: {
    num: {
      form: "num",
      default: 20,
    },
  },
};

可以看到d中顯示的為inject注入的num變量。如果在a中不進(jìn)行provide，則會(huì)顯示默認(rèn)值。

num 不是響應(yīng)式的

點(diǎn)擊+100按鈕，a組件顯示的值改變，d組件顯示的值沒(méi)有改變。

如何成為響應(yīng)式？

1.方法一：函數(shù)方法

a組件：

<template>
  <div style="width: 600px; height: 600px; background-color: darkgreen">
    我是組件a
    <h4>{{ num }}</h4>
    <button @click="add">+100</button>
    <BCom></BCom>
  </div>
</template>
 
<script>
import BCom from "./b-com.vue";
export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      num: () => this.num,
    };
  },
  methods: {
    add() {
      this.num = this.num + 100;
    },
  },
};
</script>
 
<style>
</style>

b組件

<template>
  <div
    style="
      width: 300px;
      height: 300px;
      background-color: bisque;
    "
  >
    我是組件d
    <h4>{{ this.num() }}</h4>
  </div>
</template>
  
  <script>
export default {
  inject: {
    num: {
      form: "num",
      default: () => {},
    },
  },
};
</script>
  
  <style>
</style>

2.方法二：傳遞this

a組件

<template>
  <div style="width: 600px; height: 600px; background-color: darkgreen">
    我是組件a
    <h4>{{ num }}</h4>
    <button @click="add">+100</button>
    <BCom></BCom>
  </div>
</template>
 
<script>
import BCom from "./b-com.vue";
export default {
  components: { BCom },
  data() {
    return {
      num: 2,
    };
  },
  provide() {
    return {
      AThis: this,
    };
  },
  methods: {
    add() {
      this.num = this.num + 100;
    },
  },
};
</script>
 
<style>
</style>

d組件

<template>
  <div
    style="
      width: 300px;
      height: 300px;
      background-color: bisque;
    "
  >
    我是組件d
    <h4>{{ this.AThis.num }}</h4>
  </div>
</template>
  
  <script>
export default {
  inject: {
    AThis: {
      form: "AThis",
      default() {
        return {};
      },
    },
  },
};
</script>
  
  <style>
</style>

vue3的基本用法：

provide() 接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是要注入的 key，可以是一個(gè)字符串或者一個(gè) symbol，第二個(gè)參數(shù)是要注入的值。

<script setup>
import { ref, provide } from 'vue'
 
// 提供靜態(tài)值
provide('num')
 
// 提供響應(yīng)式的值
const count = ref(0)
provide('count', count)
 
</script>

inject:

        第一個(gè)參數(shù)是注入的 key。

        Vue 會(huì)遍歷父組件鏈，通過(guò)匹配 key 來(lái)確定所提供的值。如果父組件鏈上多個(gè)組件對(duì)同一個(gè) key 提供了值，那么離得更近的組件將會(huì)“覆蓋”鏈上更遠(yuǎn)的組件所提供的值。如果沒(méi)有能通過(guò) key 匹配到值，inject() 將返回 undefined，除非提供了一個(gè)默認(rèn)值。

        第二個(gè)參數(shù)是可選的，即在沒(méi)有匹配到 key 時(shí)使用的默認(rèn)值。它也可以是一個(gè)工廠函數(shù)，用來(lái)返回某些創(chuàng)建起來(lái)比較復(fù)雜的值。如果默認(rèn)值本身就是一個(gè)函數(shù)，那么你必須將 false 作為第三個(gè)參數(shù)傳入，表明這個(gè)函數(shù)就是默認(rèn)值，而不是一個(gè)工廠函數(shù)。

<script setup>
import { inject } from 'vue'
 
// 注入值的默認(rèn)方式
const num= inject('num')
 
// 注入響應(yīng)式的值
const count = inject('count')
 
// 注入一個(gè)值，若為空則使用提供的默認(rèn)值
const bar = inject('foo', 'default value')
 
// 注入一個(gè)值，若為空則使用提供的工廠函數(shù)
const baz = inject('foo', () => new Map())
 
// 注入時(shí)為了表明提供的默認(rèn)值是個(gè)函數(shù)，需要傳入第三個(gè)參數(shù)
const fn = inject('function', () => {}, false)
</script>

注：在d組件中，如果data中存在變量num，inject又注入了變量num，在頁(yè)面中會(huì)顯示data中num的值。

參考：組合選項(xiàng) | Vue.js