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

Vue?中?provide和inject的使用

 更新時(shí)間：2022年08月02日 11:29:15   作者：櫻舞  
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下

前言

在Vue中我們可以很方便的通過父組件往子組件傳遞屬性，Props是我們將數(shù)據(jù)傳遞到子組件的主要方式之一。例如，下面的代碼，我們往子組件（PopularList ）傳遞了屬性 name,其值是Most Popular Posts。在PopularList中我們可以通過name訪問數(shù)據(jù)。

<PopularList name="Most Popular Posts" />

但是有時(shí)子組件中可以包含子組件，如果我們想將數(shù)據(jù)從父組件傳遞到孫子組件，最簡(jiǎn)單的方法就是使用provide/reject。這種方式的好處是：我們不需要將屬性先傳給子組件，再傳給孫子組件。就像Parent → Child → GrandChild。我們可以簡(jiǎn)單地將它傳遞為Parent → Grandchild，

如下圖所示：

Vue中如何使用provide和inject

如果你使用的是composition API?？梢灾苯邮褂胮rovide 方法傳遞任何形式的數(shù)據(jù)。

<script setup>
    import { provide } from 'vue'
    provide('myKey', 'message');
</script>

provide函數(shù)接收兩個(gè)參數(shù) - 值和鍵。上面的例子中，鍵是mykey，值是message。和props一樣，這個(gè)是可以是對(duì)象，數(shù)字或其他任何有效類型的數(shù)據(jù)。使用ref，我們還可以將這個(gè)屬性設(shè)置為響應(yīng)式。

<script setup>
    import { provide, ref } from 'vue'
    const message = ref('message');
    provide('myKey', message);
</script>

如果使用的是Options API，則可以使用以下結(jié)構(gòu)在組件中提供數(shù)據(jù)。

export default {
    provide: {
        myKey: 'message'
    }
}

在 Vue 中使用注入訪問父數(shù)據(jù)

在上面的例子中，我們說明了如何在父組件中傳值。我們?cè)趯O子組件中，該如何獲取到這個(gè)值，我們可以使用inject來訪問屬性。

例如，假設(shè)我們有一個(gè)如下所示的 Vue 組件：

<script setup>
    import { ref, provide } from 'vue'
    import ChildElement from './Child.vue';
    const message = ref('message');
    provide('myKey', message);
</script>
<template>
    <p>Hello World!</p>
    <ChildElement />
</template>

然后是一個(gè)Child.vue看起來像這樣的子組件：

<script setup>
    import GrandChildElement from './GrandChildElement.vue';
</script>
<template>
    <GrandChildElement />
</template>

在GrandChildElement中，我們可以訪問myKey，因?yàn)槲覀冊(cè)诟讣?jí)中provide了它。我們可以在 Child.vue中這樣做，但我們也可以只使用inject。provide使我們能夠從多個(gè)級(jí)別獲取數(shù)據(jù)。要訪問這些數(shù)據(jù)GrandChildElement，我們使用inject.

我們的GrandChildElement.vue文件可能看起來像這樣：

<script setup>
import { inject } from 'vue'
const message = inject('myKey')
</script>

const message這里將返回文本message，因?yàn)檫@是我們?cè)O(shè)置myKey的provide。如果使用的是 Options API，則可以改為

export default {
    inject: [ 'myKey' ],
    created() {
        // Can access this.myKey here
    }
}

到此這篇關(guān)于Vue 中 provide和inject的使用的文章就介紹到這了,更多相關(guān)Vue provide和inject 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論