一文聊聊Vue中provide和inject的使用方法

Vue中如何使用provide與inject？以下這篇文章就來跟大家介紹Vue中provide和inject的使用方法，希望對大家有幫助！

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

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

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

在vue3.0裡面，同樣提供了provide與inject，使用起來更簡單方便，單純的從概念去看，是比較抽象，難以理解的。 【相關推薦：vuejs影片教學、web前端開發】

#還是要從具體的實例出發

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)

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

總結

#provide()與inject()的使用比較簡單,就是解決跨組件間通信的一種方式,對於層級嵌套比較深的組件,若子孫組件想要使用父組件中的數據

那麼就可以使用這種方式進行傳遞資料的,這在平時的一些業務開發中,還是有些用的,而在面試當中也是一個高頻面試問題,怎麼解決跨級組件,非父子組件通信

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是一文聊聊Vue中provide和inject的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！