今天小編給大家分享一下Vue中的provide和inject怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)是專(zhuān)業(yè)的溫州網(wǎng)站建設(shè)公司，溫州接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行溫州網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

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

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

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

在vue3.0里面，同樣提供了provide與inject，使用起來(lái)更簡(jiǎn)單方便，單純的從概念上去看，是比較抽象，難以理解的。還是要從具體的實(shí)例出發(fā)。

provide()函數(shù)

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

實(shí)現(xiàn)： 父組件有一個(gè)provide,選項(xiàng)來(lái)提供數(shù)據(jù)，后代組件中有一個(gè)inject選項(xiàng)來(lái)開(kā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類(lèi)似,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 類(lèi)型的 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)的值。

以上就是“Vue中的provide和inject怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱(chēng)：Vue中的provide和inject怎么使用
網(wǎng)站URL：http://chinadenli.net/article46/ppcdhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作、ChatGPT、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)