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

更新時間：2023年04月23日 11:15:34 作者：wyy愛學習

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

前言

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

“依賴注入”主要是解決父子組件傳值“props逐級傳遞”問題。所以，provide/inject的作用就是組件間的傳值。

vue2基本用法：

1.provide

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

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

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

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

2.inject

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

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

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

寫法一：

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

寫法二：

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

可以看到d中顯示的為inject注入的num變量。如果在a中不進行provide，則會顯示默認值。

num 不是響應式的

點擊+100按鈕，a組件顯示的值改變，d組件顯示的值沒有改變。

如何成為響應式？

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() 接受兩個參數(shù)：第一個參數(shù)是要注入的 key，可以是一個字符串或者一個 symbol，第二個參數(shù)是要注入的值。

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

inject:

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

        Vue 會遍歷父組件鏈，通過匹配 key 來確定所提供的值。如果父組件鏈上多個組件對同一個 key 提供了值，那么離得更近的組件將會“覆蓋”鏈上更遠的組件所提供的值。如果沒有能通過 key 匹配到值，inject() 將返回 undefined，除非提供了一個默認值。

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

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

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

參考：組合選項 | Vue.js