Vue 中 provide和inject的使用

2022-08-02 14:03:34

前言

在Vue中我們可以很方便的通過父元件往子元件傳遞屬性，Props是我們將資料傳遞到子元件的主要方式之一。例如，下面的程式碼，我們往子元件（PopularList ）傳遞了屬性 name,其值是Most Popular Posts。在PopularList中我們可以通過name存取資料。

<PopularList name="Most Popular Posts" />

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

如下圖所示：

Vue中如何使用provide和inject

如果你使用的是composition API。可以直接使用provide 方法傳遞任何形式的資料。

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

provide函數接收兩個引數 - 值和鍵。上面的例子中，鍵是mykey，值是message。和props一樣，這個是可以是物件，數位或其他任何有效型別的資料。使用ref，我們還可以將這個屬性設定為響應式。

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

如果使用的是Options API，則可以使用以下結構在元件中提供資料。

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

在 Vue 中使用注入存取父資料

在上面的例子中，我們說明了如何在父元件中傳值。我們在孫子元件中，該如何獲取到這個值，我們可以使用inject來存取屬性。

例如，假設我們有一個如下所示的 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>

然後是一個Child.vue看起來像這樣的子元件：

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

在GrandChildElement中，我們可以存取myKey，因為我們在父級中provide了它。我們可以在 Child.vue中這樣做，但我們也可以只使用inject。provide使我們能夠從多個級別獲取資料。要存取這些資料GrandChildElement，我們使用inject.

我們的GrandChildElement.vue檔案可能看起來像這樣：

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

const message這裡將返回文字message，因為這是我們設定myKey的provide。如果使用的是 Options API，則可以改為

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

到此這篇關於Vue 中 provide和inject的使用的文章就介紹到這了,更多相關Vue provide和inject 內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue 中 provide和inject的使用

目錄

前言

Vue中如何使用provide和inject

在 Vue 中使用注入存取父資料

熱門文章