vue高級組件之provide與inject怎么使用

本文小編為大家詳細介紹“vue高級組件之provide與inject怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue高級組件之provide與inject怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue provide與inject使用及說明

vue中不同組件通信方式如下

• 1.父子組件，通過prop

• 2.非父子組件，通過vuex或根vue轉載器

 通常是以上兩種情況，然而還有一種比較特殊的情況，即孫子組件或更深層次的組件通信

1.下面是a.vue

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>

2.下面是son.vue

<template>
    <div>
        <grandson prop="data"></grandson>
    </div>
</template>
 
<script>
export default {
    name: 'Son',
    props: ['data'],
}
</script>

很容易看出，如果父組件需要與grandson通信，除了vuex，必須先與son組件通信，再由son與grandson通信，在層級比較少的情況下也無可厚非，但是層級一旦多起來是很可怕的

有人會問為什么不用vuex，簡單省事，有很多為了這個引入vuex會導致代碼性價比比較低，項目本身沒有使用vuex的必要

那么這種情況下provide / inject就登場了

• 1.provide就相當于加強版父組件prop

• 2.inject就相當于加強版子組件的props 

因為以上兩者可以在父組件與子組件、孫子組件、曾孫子...組件數據交互，也就是說不僅限于prop的父子組件數據交互，只要在上一層級的聲明的provide，那么下一層級無論多深都能夠通過inject來訪問到provide的數據

1.父級組件如下

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>
 
<script>
export default {
    name: 'Test',
    provide: {
        name: 'Garrett'
    }
}

2.孫子組件，注意這里是孫子組件，父級 -> 子組件 -> 孫子組件三個層級關系

<template>
    <div>
        {{name}}
    </div>
</template>
 
<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>

這里可以通過inject直接訪問其兩個層級上的數據，其用法與props完全相同，同樣可以參數校驗等

缺點

這么做也是有明顯的缺點的，在任意層級都能訪問導致數據追蹤比較困難，不知道是哪一個層級聲明了這個或者不知道哪一層級或若干個層級使用了，因此這個屬性通常并不建議使用能用vuex的使用vuex，不能用的多傳參幾層，但是在做組件庫開發時，不對vuex進行依賴，且不知道用戶使用環境的情況下可以很好的使用

vue3中父子組件傳值(provide/inject)

在vue3中的父子組件一般都用provide 和 inject 傳值

父組件中引入和注冊了子組件之后

在script標簽下引入provide就可以將父組件中的變量或方法傳遞出去

在子組件中就可以用inject來接收一下 不管子組件的層級有多深都可以接收到

具體操作

• provide('變量名'，'變量')

• inject('變量名')

• provide('事件名','事件')

• inject('事件名','事件')

讀到這里，這篇“vue高級組件之provide與inject怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。