快捷導(dǎo)航

Vue3中provide和inject數(shù)據(jù)修改規(guī)則

更新時間：2025年04月23日 11:22:27 作者：BillKu

在Vue3中,通過inject接收到的數(shù)據(jù)是否可以直接修改,取決于provide提供的值的類型和響應(yīng)式處理方式,本文給大家介紹Vue3中provide和inject數(shù)據(jù)修改規(guī)則,感興趣的朋友一起看看吧

1. 若提供的是普通值（非響應(yīng)式數(shù)據(jù)）

// 父組件
provide('staticValue', 123);

// 父組件
const count = ref(0);
provide('count', count); // 提供 ref
const state = reactive({ value: 42 });
provide('state', state); // 提供 reactive

子組件修改行為：
- 允許直接修改：響應(yīng)式數(shù)據(jù)是引用傳遞，修改會同步到父組件。
- 響應(yīng)式生效：父子組件視圖都會更新。
示例代碼：

// 子組件
const count = inject('count');
count.value++; // 修改 ref 的值，父組件同步更新
const state = inject('state');
state.value = 100; // 修改 reactive 屬性，父組件同步更新

// 父組件
const state = reactive({ value: 42 });
provide('state', readonly(state)); // 提供只讀對象

// 父組件
const count = ref(0);
const updateCount = (newVal) => { count.value = newVal };
provide('count', { value: readonly(count), updateCount });

通過合理選擇數(shù)據(jù)類型和響應(yīng)式 API，可靈活控制子組件對注入數(shù)據(jù)的操作權(quán)限。

到此這篇關(guān)于Vue3中provide和inject數(shù)據(jù)修改規(guī)則的文章就介紹到這了,更多相關(guān)vue provide和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: