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中文網其他相關文章！
