簡(jiǎn)述
在項(xiàng)目中严拒，父組件傳值數(shù)據(jù)給子組件，我們都知道怎么實(shí)現(xiàn)荠呐，那么父組件傳值給子組件的子組件呢赛蔫？我們一般想法是通過傳值子組件，子組件再傳值給子的子組件泥张。這樣維護(hù)不容易還容易出現(xiàn)問題呵恢，那么Vue為我們提供了provide/inject，依賴和注入媚创。
- 誤區(qū)
我一開始寫這個(gè)小Demo的時(shí)候瑰剃，思路是點(diǎn)擊按鈕后，數(shù)據(jù)+1筝野，再給子組件傳值晌姚，發(fā)現(xiàn)provide不能寫入到函數(shù)中，其實(shí)我們可以換一個(gè)角度歇竟，因?yàn)槭菙?shù)據(jù)綁定挥唠，所以我們只需要對(duì)數(shù)據(jù)進(jìn)行操作即可。
關(guān)鍵引入
import {provide } from 'vue'; //提供/依賴
import { inject } from 'vue'; // 注入
- provide
- 第一個(gè)參數(shù)被稱為注入名焕议，可以是一個(gè)字符串或是一個(gè) Symbol宝磨。后代組件會(huì)用注入名來查找期望注入的值。一個(gè)組件可以
多次調(diào)用 provide()盅安，使用不同的注入名唤锉，注入不同的依賴值。 - 第二個(gè)參數(shù)是提供的值别瞭，值可以是任意類型窿祥，包括響應(yīng)式的狀態(tài)，比如一個(gè) ref
- 注入方的組件不可更改 readonly
<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>
- inject
- 默認(rèn)情況下蝙寨，inject 假設(shè)傳入的注入名會(huì)被某個(gè)祖先鏈上的組件提供晒衩。如果該注入名的確沒有任何組件提供，則會(huì)拋出一個(gè)運(yùn)行時(shí)警告
- 如果在注入一個(gè)值時(shí)不要求必須有提供者墙歪，那么我們應(yīng)該聲明一個(gè)默認(rèn)值听系，和 props 類似：const value = inject('message', '這是默認(rèn)值')
結(jié)構(gòu)
- 父組件
- A是父的子組件
- B是A的子組件
代碼
- 父組件
<template>
<div>
<div class="div1">
<button @click="tailNum">
傳值子組件們
</button>
<A></A>
</div>
</div>
</template>
<script setup>
import {ref, provide } from 'vue';
import A from './A.vue';
const count = ref(0)
provide(/* 注入名 */ 'num', /* 值 */ count)
const tailNum = ()=>{
count.value++
}
</script>
- A組件
<template>
<div>
這是A組件,獲取到父組件信息是:{{num}}
<B></B>
</div>
</template>
<script setup>
import { inject } from 'vue';
import B from './B.vue'
const num = inject('num')
</script>
- B組件
<template>
<div>
這是B組件,獲取到父父組件信息是:{{num}}
</div>
</template>
<script setup>
import { inject } from 'vue';
const num = inject('num')
</script>
