快捷導(dǎo)航

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

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

在vue2.0里面provide與inject是以選項(xiàng)式(配置)API的方式在組件中進(jìn)行使用的,解決的是跨組件(祖孫)間通信的一種方式，本文就來(lái)聊聊它們?cè)赩ue中具體的使用吧

provide()函數(shù)

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

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

provide(第一個(gè)參數(shù),第二個(gè)參數(shù)),接收兩個(gè)參數(shù),第一個(gè)參數(shù)是要注入的key,它可以是一個(gè)字符串或一個(gè)symbol,第二個(gè)參數(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);

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

inject()函數(shù)

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

實(shí)現(xiàn): 接收父(祖)組件傳遞過(guò)來(lái)的值

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

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

如果沒(méi)有能通過(guò)key匹配到的值,inject()函數(shù)將返回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ù)

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

具體示例代碼

import {inject,toRefs} from  "vue";

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

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

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

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

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

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

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

注意

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

如下是完整的示例

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

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

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

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

// 注入一個(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)

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