Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
Provide / Inject
通常，當(dāng)我們需要從父組件向子組件傳遞數(shù)據(jù)時(shí)，我們使用 props。想象一下這樣的結(jié)構(gòu)：有一些深度嵌套的組件，而深層的子組件只需要父組件的部分內(nèi)容。在這種情況下，如果仍然將 prop 沿著組件鏈逐級(jí)傳遞下去，可能會(huì)很麻煩。
官網(wǎng)的解釋很讓人疑惑，那我翻譯下這幾句話：
provide 可以在祖先組件中指定我們想要提供給后代組件的數(shù)據(jù)或方法，而在任何后代組件中，我們都可以使用 inject 來(lái)接收 provide 提供的數(shù)據(jù)或方法。
看一個(gè)例子
父組件傳遞數(shù)據(jù)
<template>
<div class="App">
<button>我是App</button>
<A></A>
</div>
</template>
<script setup lang='ts'>
import { provide, ref } from 'vue'
import A from './components/A.vue'
let flag = ref<number>(1)
provide('flag', flag)
</script>
<style>
.App {
background: blue;
color: #fff;
}
</style>子組件接受
<template>
<div style="background-color: green;">
我是B
<button @click="change">change falg</button>
<div>{{ flag }}</div>
</div>
</template>
<script setup lang='ts'>
import { inject, Ref, ref } from 'vue'
const flag = inject<Ref<number>>('flag', ref(1))
const change = () => {
flag.value = 2
}
</script>
<style>
</style>TIPS 你如果傳遞普通的值 是不具有響應(yīng)式的 需要通過(guò)ref reactive 添加響應(yīng)式
使用場(chǎng)景
當(dāng)父組件有很多數(shù)據(jù)需要分發(fā)給其子代組件的時(shí)候， 就可以使用provide和inject。
總結(jié)
到此這篇關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject的文章就介紹到這了,更多相關(guān)Vue3依賴注入Provide/Inject內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js實(shí)現(xiàn)微信過(guò)渡動(dòng)畫(huà)左右切換效果
這篇文章主要給大家介紹了利用Vue.js仿微信過(guò)渡動(dòng)畫(huà)左右切換效果的相關(guān)資料，需要用到的技術(shù)棧是Vue+Vuex。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
今天小編就為大家分享一篇vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本文主要介紹了nuxt.js框架使用小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
本文給大家分享的是如何使用vue實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊選中的效果，附上了實(shí)例代碼，有需要的小伙伴可以參考下2020-10-10
vue如何通過(guò)點(diǎn)擊事件彈出彈窗頁(yè)面詳解
彈窗是我們開(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于vue如何通過(guò)點(diǎn)擊事件彈出彈窗頁(yè)面的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
徹底搞懂并解決vue-cli4中圖片顯示的問(wèn)題實(shí)現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
本文主要介紹了Vite熱更新失效的問(wèn)題解決,原因是文件夾和文件名大小寫(xiě)不一致,下面就來(lái)解決一下次問(wèn)題,感興趣的可以了解一下2024-08-08