Vue中怎么使用provide與inject

本篇內(nèi)容介紹了“Vue中怎么使用provide與inject”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

在vue2.0里面provide與inject是以選項式(配置)API的方式在組件中進行使用的,解決的是跨組件(祖孫)間通信的一種方式

也就是父子組件間的通信,父組件上市通過自定義屬性,而子組件間通過props這種方式接收,如果想要一層一層的傳遞,這種方式就會比較麻煩,不靈活

provide與inject就是解決:怎么從祖組件的數(shù)據(jù),傳遞到孫組件,實現(xiàn)跨級組件傳遞數(shù)據(jù)的

在vue3.0里面,同樣提供了provide與inject,使用起來更簡單方便,單純的從概念上去看,是比較抽象,難以理解的

還是要從具體的實例出發(fā)

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ù)

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

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

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

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

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

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

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

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

具體示例代碼

import {inject,toRefs} from  "vue";

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

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

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

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

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

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

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

注意

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

如下是完整的示例

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

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

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

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

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

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

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

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

“Vue中怎么使用provide與inject”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！