Vue?中?provide和inject的使用
前言
在Vue中我們可以很方便的通過父組件往子組件傳遞屬性，Props是我們將數(shù)據(jù)傳遞到子組件的主要方式之一。例如，下面的代碼，我們往子組件（PopularList ）傳遞了屬性 name,其值是Most Popular Posts。在PopularList中我們可以通過name訪問數(shù)據(jù)。
<PopularList name="Most Popular Posts" />
但是有時(shí)子組件中可以包含子組件，如果我們想將數(shù)據(jù)從父組件傳遞到孫子組件，最簡單的方法就是使用provide/reject。這種方式的好處是：我們不需要將屬性先傳給子組件，再傳給孫子組件。就像Parent → Child → GrandChild。我們可以簡單地將它傳遞為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è)是可以是對象，數(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ù)
在上面的例子中，我們說明了如何在父組件中傳值。我們在孫子組件中，該如何獲取到這個(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)槲覀冊诟讣壷衟rovide了它。我們可以在 Child.vue中這樣做，但我們也可以只使用inject。provide使我們能夠從多個(gè)級別獲取數(shù)據(jù)。要訪問這些數(shù)據(jù)GrandChildElement，我們使用inject.
我們的GrandChildElement.vue文件可能看起來像這樣：
<script setup>
import { inject } from 'vue'
const message = inject('myKey')
</script>const message這里將返回文本message，因?yàn)檫@是我們設(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）時(shí)的常用組合,通過嵌套路由,可以實(shí)現(xiàn)多級頁面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細(xì)介紹,需要的朋友可以參考下2025-01-01
Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)列表動(dòng)態(tài)添加和刪除的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表）
這篇文章主要介紹了詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了Vue3中的常見組件通信之props和自定義事件,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue項(xiàng)目動(dòng)態(tài)設(shè)置iframe元素高度的操作代碼
在現(xiàn)代Web開發(fā)中,iframe元素常用于嵌入外部內(nèi)容到當(dāng)前網(wǎng)頁中,比如在線文檔、視頻播放器或是廣告,Vue框架提供了強(qiáng)大的工具來解決這個(gè)問題,通過動(dòng)態(tài)設(shè)置iframe元素的高度,我們可以確保頁面布局既美觀又高效,本文給大家介紹了vue項(xiàng)目動(dòng)態(tài)設(shè)置iframe元素高度的操作2024-10-10
vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認(rèn)事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認(rèn)行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式2025-02-02