首頁 > web前端 > Vue.js > 主體

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

青灯夜游
發布: 2023-04-10 18:52:13
轉載
1322 人瀏覽過

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

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

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

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

provideinject就是解決:怎麼從祖組件的數據,傳遞到孫組件,實現跨級組件傳遞數據的

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

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

provide()函數

定義:提供一個值,可以被後代元件注入

#實作:父元件有一個provide,選項來提供數據,後代元件中有一個inject選項來開始使用父元件傳遞過來的資料

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

providevue官方提供的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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!