溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue3中provide和inject怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue3中provide和inject怎么使用”吧!
前言：
在父子組件傳遞數據時，通常使用的是 props 和 emit，父傳子時，使用的是 props，如果是父組件傳孫組件時，就需要先傳給子組件，子組件再傳給孫組件，如果多個子組件或多個孫組件使用時，就需要傳很多次，會很麻煩。
像這種情況，可以使用 provide 和 inject 解決這種問題，不論組件嵌套多深，父組件都可以為所有子組件或孫組件提供數據，父組件使用 provide 提供數據，子組件或孫組件 inject 注入數據。同時兄弟組件之間傳值更方便。
provide ：是一個對象，里面是屬性和值。如：
provide:{
info:"值"
}如果 provide 需要使用 data 內的數據時，這樣寫就會報錯。訪問組件實例 property 時，需要將 provide 轉換為返回對象的函數。
provide(){
return{
info: this.msg
}
}inject ：是一個字符串數組。如：
inject: [ 'info' ]
接收上邊 provide 提供的 info 數據，也可以是一個對象，該對象包含 from 和 default 屬性，from 是可用做的注入內容中搜索用的 key，default 屬性是指定默認值。
在 vue2 中 project / inject 應用：
//父組件
export default{
provide:{
info:"提供數據"
}
}
//子組件
export default{
inject:['info'],
mounted(){
console.log("接收數據：", this.info) // 接收數據：提供數據
}
}provide / inject 類似于消息的訂閱和發布。provide 提供或發送數據， inject 接收數據。
在組合式 API 中使用 provide/inject，兩個只能在 setup 期間調用，使用之前，必須從 vue 顯示導入 provide/inject 方法。
provide 函數接收兩個參數：
provide( name,value )
name：定義提供 property 的 name 。
value ：property 的值。
使用時：
import { provide } from "vue"
export default {
setup(){
provide('info',"值")
}
}inject 函數有兩個參數：
inject(name,default)
name：接收 provide 提供的屬性名。
default：設置默認值，可以不寫，是可選參數。
使用時：
import { inject } from "vue"
export default {
setup(){
inject('info',"設置默認值")
}
}完整實例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>為了給 provide/inject 添加響應性，使用 ref 或 reactive 。
完整實例2：provide/inject 響應式
//父組件代碼
<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("今天你學習了嗎？")
setTimeout(()=>{
info.value = "不找借口，立馬學習"
},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 類似于消息的訂閱和發布，遵循 vue 當中的單項數據流，什么意思呢？就是數據在哪，修改只能在哪，不能在數據傳遞處修改數據，容易造成狀態不可預測。
在訂閱組件內修改值的時候，可以被正常修改，如果其他組件也使用該值的時候，狀態容易造成混亂，所以需要在源頭上規避問題。
readonly 只讀函數，使用之前需要引入，如果給變量加上 readonly 屬性，則該數據只能讀取，無法改變，被修改時會發出警告，但不會改變值。
使用方法：
import { readonly } from "vue"
let info = readonly('只讀info值')
setTimout(()=>{
info="更新info" //兩秒后更新info的值
},2000)運行兩秒后，瀏覽器發出警告，提示 info 值不可修改。
所以我們就給provide發射出去的數據，添加一個只讀屬性，避免發射出去的數據被修改。
完整實例2的 provide 處添加 readonly 。
provide('info', readonly(info))在子組件修改值的時候，會有一個只讀提醒。
修改值的時候，還是需要在 provide 發布數據的組件內修改數據，所以會在組件內添加修改方法，同時也發布出去，在子組件處調用就可以了。
如：
//發布
let info = ref("今天你學習了嗎？")
const changeInfo = (val)=>{
info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)
//訂閱
const chang = inject('changeInfo')
chang('沖向前端工程師')完整示例3：修改數據
// 父組件代碼
<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("今天你學習了嗎？")
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>到此，相信大家對“vue3中provide和inject怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
