Vue3中provide和inject作用和場景
更新時間：2023年11月24日 11:31:34 作者：小沐°
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實現(xiàn)跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧
作用和場景：頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法，實現(xiàn)跨層組件通信
跨層傳遞普通數(shù)據(jù)：
1.頂層組件通過provide函數(shù)提供數(shù)據(jù)
2.底層組件通過inject函數(shù)獲取數(shù)據(jù)
既可以傳遞普通數(shù)據(jù)，也可以使用ref傳遞響應(yīng)式數(shù)據(jù)（頂層組件修改數(shù)據(jù)后可以響應(yīng)過去）
但是底層組件不能修改頂層組件傳遞過來的數(shù)據(jù)，所以我們可以在頂層組件中跨層傳遞函數(shù)，給子孫后代傳遞可以修改數(shù)據(jù)的方法
頂層組件
<script setup>
import {provide,ref} from 'vue'
const count=ref(100)
provide('changeCount',(newCount)=>{
count.value=newCount
})
</script>底層組件
<script setup>
import {inject} from 'vue'
const changeCount=inject(changeCount)
changeCount(1000)//可以放在點擊事件上
</script>這樣就可以把父組件里的count改為1000了
到此這篇關(guān)于Vue3中provide和inject作用和場景的文章就介紹到這了,更多相關(guān)Vue3 provide和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?+?element-plus自定義表單驗證(修改密碼業(yè)務(wù))的示例
這篇文章主要介紹了vue?+?element-plus自定義表單驗證(修改密碼業(yè)務(wù)),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了基于vue實現(xiàn)的圓形菜單欄組件，本文通過實例代碼，圖文詳解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue打包更新packge.json版本號的全過程,文章通過圖文結(jié)合的方式給大家講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了ant-design-vue動態(tài)表格合并案例，文章圍繞主題通過案例詳解展開相關(guān)內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文介紹了如何安裝Nginx并部署Vue項目,首先從官網(wǎng)下載Nginx并啟動服務(wù),然后使用Vite構(gòu)建Vue項目,將構(gòu)建好的dist文件夾部署到Nginx目錄下,并修改nginx.conf文件以防止刷新頁面時出現(xiàn)404錯誤,最后,總結(jié)了刷新頁面空白問題的解決方法2026-01-01
這篇文章主要介紹了前端-Vue2使用腳手架的相關(guān)資料,VueCLI是Vue命令行工具,用于快速搭建、配置Vue項目,集成構(gòu)建、插件、開發(fā)服務(wù)器等功能,需要的朋友可以參考下2025-06-06
這篇文章主要為大家介紹了vue中destroyed方法及使用示例講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue中循環(huán)請求接口參數(shù)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08