Vue中的provide和inject怎么使用

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

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

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

provide與inject就是解決：怎么從祖組件的數據，傳遞到孫組件，實現跨級組件傳遞數據的

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

provide()函數

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

實現： 父組件有一個provide,選項來提供數據，后代組件中有一個inject選項來開始使用父組件傳遞過來的數據

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

provide是vue官方提供的componsition API

具體示例代碼如下所示

import {reactive,provide} from "vue";

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

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

inject()函數

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

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

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

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

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

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

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

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

具體示例代碼

import {inject,toRefs} from  "vue";

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

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

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

若使用解構時,則模板中可直接使用變量

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

若使用解構時,則模板中可直接使用變量

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

注意

如果是解構變量,想要數據響應式,那么需要使用toRef()或toRefs()將數據進行轉化為響應式

如下是完整的示例

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

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

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

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

以上就是“Vue中的provide和inject怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。