Vue3中provide和inject作用和場景
更新時(shí)間：2023年11月24日 11:31:34 作者：小沐°
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧
作用和場景：頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法，實(shí)現(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)//可以放在點(diǎn)擊事件上
</script>這樣就可以把父組件里的count改為1000了
到此這篇關(guān)于Vue3中provide和inject作用和場景的文章就介紹到這了,更多相關(guān)Vue3 provide和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3實(shí)現(xiàn)el-table分批渲染表格
這篇文章主要為大家詳細(xì)介紹了vue3項(xiàng)目中如何實(shí)現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題
這篇文章主要介紹了vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理
watch?的本質(zhì)就是觀測一個響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實(shí)現(xiàn)利用了effect?和?options.scheduler?選項(xiàng)，這篇文章主要介紹了Vue3源碼分析偵聽器watch的實(shí)現(xiàn)原理,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue組件父與子通信詳解，實(shí)現(xiàn)登錄窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue自適應(yīng)布局postcss-px2rem詳解
這篇文章主要介紹了vue自適應(yīng)布局（postcss-px2rem）的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-05-05
vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實(shí)例形式分析了v-model實(shí)現(xiàn)表單input元素?cái)?shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
異步組件是 Vue.js 中提高應(yīng)用程序性能和加載速度的重要功能之一,在使用異步組件時(shí),需要注意組件的加載時(shí)間、錯誤處理和命名規(guī)范等問題,本文將介紹 Vue.js 中異步組件的概念、優(yōu)勢以及如何使用異步組件,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vuex之Action的使用方法詳解,Action 類似于 mutation ,不同在于Action 提交的是 mutation,而不是直接變更狀態(tài),2023-11-11
Action 可以包含任意異步操作,需要的朋友可以參考下
vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue計(jì)算屬性get和set用法,結(jié)合實(shí)例形式分析了計(jì)算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下2019-02-02