Vue中如何使用provide與inject?以下這篇文章就來跟大家介紹Vue中provide和inject的使用方法,希望對大家有幫助!
在vue2.0
裡面provide
與inject
是以選項式(配置)API
的方式在元件中進行使用的,解決的是跨元件(祖孫)間通訊的一種方式
也就是父子元件間的通訊,父元件上市透過自訂屬性,而子元件間透過props
這種方式接收,如果想要一層一層的傳遞,這種方式就會比較麻煩,不靈活
provide
與inject
就是解決:怎麼從祖組件的數據,傳遞到孫組件,實現跨級組件傳遞數據的
在vue3.0
裡面,同樣提供了provide
與inject
,使用起來更簡單方便,單純的從概念去看,是比較抽象,難以理解的。 【相關推薦:vuejs影片教學、web前端開發】
#還是要從具體的實例出發
定義:提供一個值,可以被後代元件注入
#實作:父元件有一個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(第一個參數,第二個參數(可選))
:第一個參數是注入的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()
的使用比較簡單,就是解決跨組件間通信的一種方式,對於層級嵌套比較深的組件,若子孫組件想要使用父組件中的數據
那麼就可以使用這種方式進行傳遞資料的,這在平時的一些業務開發中,還是有些用的,而在面試當中也是一個高頻面試問題,怎麼解決跨級組件,非父子組件通信
以上是一文聊聊Vue中provide和inject的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!