詳解在Vue中如何使用provide與inject

更新時間：2023年03月20日 11:02:13 作者：itclanCoder

在vue2.0里面provide與inject是以選項式(配置)API的方式在組件中進行使用的,解決的是跨組件(祖孫)間通信的一種方式，本文就來聊聊它們在Vue中具體的使用吧

provide()函數(shù)

定義:提供一個值，可以被后代組件注入

實現(xiàn): 父組件有一個provide,選項來提供數(shù)據(jù),后代組件中有一個inject選項來開始使用父組件傳遞過來的數(shù)據(jù)

provide(第一個參數(shù),第二個參數(shù)),接收兩個參數(shù),第一個參數(shù)是要注入的key,它可以是一個字符串或一個symbol,第二個參數(shù)是要注入的值(具體要傳遞給子孫組件的數(shù)據(jù))

provide是vue官方提供的componsition API

具體示例代碼如下所示

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

通過上面的provide提供一個值,就可以了的,那怎么樣把這個數(shù)據(jù)傳遞到子孫組件,那么就需要用到inject了的

inject()函數(shù)

定義: 注入一個由祖先(父)組件或整個應(yīng)用提供的值

實現(xiàn): 接收父(祖)組件傳遞過來的值

inject(第一個參數(shù),第二個參數(shù)(可選)):第一個參數(shù)是注入的key,來自父(祖)組件,它們兩者是需要保持一致的

Vue會遍歷父組件鏈,通過匹配key來確定所提供的值,如果父組件鏈上多個組件對同一個key提供了之,那么離得更近的將會覆蓋鏈上更遠(yuǎn)的組件所提供的值

如果沒有能通過key匹配到的值,inject()函數(shù)將返回undefined,除非提供一個默認(rèn)值

第二個參數(shù)是可選的,即沒有匹配到key時,使用默認(rèn)值,它也可以是一個函數(shù),用來返回某些創(chuàng)建起來比較復(fù)雜的值,如果默認(rèn)值本身就是一個函數(shù)

那么必須將false作為第三個參數(shù)傳入,表明這個函數(shù)就是默認(rèn)值,而不是一個工廠函數(shù)

與注冊生命周期鉤子的API類似,inject()必須在組件的setup()階段同步調(diào)用

具體示例代碼

import {inject,toRefs} from  "vue";

const person = inject('person');
// 若是使用解構(gòu),則會丟失響應(yīng)式,修改數(shù)據(jù)時,頁面不會更新,具體解決,可以引入toRef或toRefs函數(shù)
const {name,website} = toRefs(person);

在孫組件中的模板即可以讀取,從父組件傳遞過來的數(shù)據(jù)也是支持響應(yīng)式的

{{person.name}}---{{person.website}}

若使用解構(gòu)時,則模板中可直接使用變量

{{name}}--{{website}}

若使用解構(gòu)時,則模板中可直接使用變量

{{name}}--{{website}}

注意

如果是解構(gòu)變量,想要數(shù)據(jù)響應(yīng)式,那么需要使用toRef()或toRefs()將數(shù)據(jù)進行轉(zhuǎn)化為響應(yīng)式

如下是完整的示例

import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默認(rèn)方式
const foo = inject('foo') 

// 注入響應(yīng)式的值
const count = inject('count')

// 通過 Symbol 類型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一個值，若為空則使用提供的默認(rèn)值
const bar = inject('foo', 'default value')

// 注入一個值，若為空則使用提供的工廠函數(shù)
const baz = inject('foo', () => new Map())

// 注入時為了表明提供的默認(rèn)值是個函數(shù)，需要傳入第三個參數(shù)
const fn = inject('function', () => {}, false)

基本上用第一種注入默認(rèn)值的方式,使用是最多的,接收父組件提供傳遞過來的值