vue3中?provide?和?inject?用法及原理
前言:
在父子組件傳遞數(shù)據(jù)時,通常使用的是 props 和 emit,父傳子時,使用的是 props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩。
像這種情況,可以使用 provide
和 inject
解決這種問題,不論組件嵌套多深,父組件都可以為所有子組件或?qū)O組件提供數(shù)據(jù),父組件使用 provide
提供數(shù)據(jù),子組件或?qū)O組件 inject
注入數(shù)據(jù)。同時兄弟組件之間傳值更方便。
一、Vue2 的 provide / inject 使用
provide :是一個對象,里面是屬性和值。如:
provide:{ info:"值" }
如果 provide
需要使用 data
內(nèi)的數(shù)據(jù)時,這樣寫就會報錯。訪問組件實例 property
時,需要將 provide
轉(zhuǎn)換為返回對象的函數(shù)。
provide(){ return{ info: this.msg } }
inject
:是一個字符串?dāng)?shù)組。如:
inject: [ 'info' ]
接收上邊 provide 提供的 info 數(shù)據(jù),也可以是一個對象,該對象包含 from 和 default 屬性,from 是可用做的注入內(nèi)容中搜索用的 key,default 屬性是指定默認(rèn)值。
在 vue2 中 project / inject 應(yīng)用:
//父組件 export default{ provide:{ info:"提供數(shù)據(jù)" } } //子組件 export default{ inject:['info'], mounted(){ console.log("接收數(shù)據(jù):", this.info) // 接收數(shù)據(jù):提供數(shù)據(jù) } }
provide / inject
類似于消息的訂閱和發(fā)布。provide
提供或發(fā)送數(shù)據(jù), inject
接收數(shù)據(jù)。
二、Vue3 的 provide / inject 使用
在組合式 API
中使用 provide/inject
,兩個只能在 setup
期間調(diào)用,使用之前,必須從 vue
顯示導(dǎo)入 provide/inject
方法。
provide 函數(shù)接收兩個參數(shù):
provide( name,value )
name
:定義提供property
的name
。value
:property
的值。
使用時:
import { provide } from "vue" export default { setup(){ provide('info',"值") } }
inject 函數(shù)有兩個參數(shù):
inject(name,default)
name
:接收provide
提供的屬性名。default
:設(shè)置默認(rèn)值,可以不寫,是可選參數(shù)。
使用時:
import { inject } from "vue" export default { setup(){ inject('info',"設(shè)置默認(rèn)值") } }
完整實例1:provide/inject
實例
//父組件代碼 <script> import { provide } from "vue" export default { setup(){ provide('info',"值") } } </script> //子組件 代碼 <template> {{info}} </template> <script> import { inject } from "vue" export default { setup(){ const info = inject('info') return{ info } } } </script>
三、添加響應(yīng)性
為了給 provide/inject
添加響應(yīng)性,使用 ref
或 reactive
。
完整實例2:provide/inject
響應(yīng)式
//父組件代碼 <template> <div> info:{{info}} <InjectCom ></InjectCom> </div> </template> <script> import InjectCom from "./InjectCom" import { provide,readonly,ref } from "vue" export default { setup(){ let info = ref("今天你學(xué)習(xí)了嗎?") setTimeout(()=>{ info.value = "不找借口,立馬學(xué)習(xí)" },2000) provide('info',info) return{ info } }, components:{ InjectCom } } </script> // InjectCom 子組件代碼 <template> {{info}} </template> <script> import { inject } from "vue" export default { setup(){ const info = inject('info') setTimeout(()=>{ info.value = "更新" },2000) return{ info } } } </script>
上述示例,在父組件或子組件都會修改 info
的值。
provide / inject
類似于消息的訂閱和發(fā)布,遵循 vue
當(dāng)中的單項數(shù)據(jù)流,什么意思呢?就是數(shù)據(jù)在哪,修改只能在哪,不能在數(shù)據(jù)傳遞處修改數(shù)據(jù),容易造成狀態(tài)不可預(yù)測。
在訂閱組件內(nèi)修改值的時候,可以被正常修改,如果其他組件也使用該值的時候,狀態(tài)容易造成混亂,所以需要在源頭上規(guī)避問題。
readonly
只讀函數(shù),使用之前需要引入,如果給變量加上 readonly
屬性,則該數(shù)據(jù)只能讀取,無法改變,被修改時會發(fā)出警告,但不會改變值。
使用方法:
import { readonly } from "vue" let info = readonly('只讀info值') setTimout(()=>{ info="更新info" //兩秒后更新info的值 },2000)
運行兩秒后,瀏覽器發(fā)出警告,提示 info 值不可修改。
所以我們就給provide
發(fā)射出去的數(shù)據(jù),添加一個只讀屬性,避免發(fā)射出去的數(shù)據(jù)被修改。
完整實例2的 provide 處添加 readonly 。
provide('info', readonly(info))
在子組件修改值的時候,會有一個只讀提醒。
修改值的時候,還是需要在 provide
發(fā)布數(shù)據(jù)的組件內(nèi)修改數(shù)據(jù),所以會在組件內(nèi)添加修改方法,同時也發(fā)布出去,在子組件處調(diào)用就可以了。
如:
//發(fā)布 let info = ref("今天你學(xué)習(xí)了嗎?") const changeInfo = (val)=>{ info.value = val } provide('info',readonly(info)) provide('changeInfo',changeInfo) //訂閱 const chang = inject('changeInfo') chang('沖向前端工程師')
完整示例3:修改數(shù)據(jù)
// 父組件代碼
<template>
<div>
info:{{info}}
<InjectCom ></InjectCom>
</div>
</template>
<script>
import InjectCom from "./InjectCom"
import { provide,readonly,ref } from "vue"
export default {
setup(){
let info = ref("今天你學(xué)習(xí)了嗎?")
const changeInfo = (val)=>{
info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)
return{
info
}
},
components:{
InjectCom
}
}
</script>
//InjectCom 子組件代碼
<template>
<div>
<button @click="chang('沖向前端工程師')">更新值</button>
</div>
</template>
<script>
import { inject } from "vue"
export default {
setup(){
const info = inject('info')
const chang = inject('changeInfo')
return{
info,
chang
}
}
}
</script>
到此這篇關(guān)于vue3
中 provide
和 inject
用法及原理的文章就介紹到這了,更多相關(guān) vue3 中provide 和 inject 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載
學(xué)了vue寫項目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時間。本文主要介紹了vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載,感興趣的可以了解一下2021-06-06vue、uniapp實現(xiàn)組件動態(tài)切換效果
在Vue中,通過使用動態(tài)組件,我們可以實現(xiàn)組件的動態(tài)切換,從而達(dá)到頁面的動態(tài)展示效果,這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下2023-10-10