亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject

 更新時(shí)間：2023年05月09日 11:17:11   作者：小滿zs  
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下

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)文章

最新評(píng)論