快捷導(dǎo)航

Vue3中子組件改變父組件傳過(guò)來(lái)的值(props)的方法小結(jié)

更新時(shí)間：2025年04月01日 09:56:16 作者：匹馬夕陽(yáng)

在 Vue 3 中,子組件改變父組件傳過(guò)來(lái)的值（props）的方法主要有以下幾種：通過(guò)事件發(fā)射、使用 v-model、模擬 .sync 修飾符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我將結(jié)合代碼示例和使用場(chǎng)景詳細(xì)講解這些方法,需要的朋友可以參考下

1. 通過(guò)事件發(fā)射

使用場(chǎng)景：當(dāng)子組件需要顯式通知父組件更新 props 的值時(shí)，事件發(fā)射是一種常見(jiàn)且推薦的方式。這種方法清晰地表達(dá)了數(shù)據(jù)流向，符合 Vue 的單向數(shù)據(jù)流原則。

代碼示例：

// 父組件
<template>
  <div>
    <Child :message="parentMessage" @update:message="updateMessage" />
    <p>父組件值：{{ parentMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const parentMessage = ref('Hello from parent');

const updateMessage = (newMessage) => {
  parentMessage.value = newMessage;
};
</script>

// 子組件
<template>
  <div>
    <input v-model="localMessage" @input="handleInput" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  message: String
});

const emit = defineEmits(['update:message']);

const localMessage = ref(props.message);

// 監(jiān)聽(tīng) props 的變化，同步本地值
watch(() => props.message, (newVal) => {
  localMessage.value = newVal;
});

const handleInput = () => {
  emit('update:message', localMessage.value);
};
</script>

解釋：

父組件將 parentMessage 作為 prop 傳遞給子組件，并監(jiān)聽(tīng)子組件發(fā)出的 update:message 事件。
子組件使用 localMessage 維護(hù)本地狀態(tài)，并通過(guò) watch 確保與父組件的 prop 同步。
當(dāng)輸入框的值改變時(shí)，子組件通過(guò) emit('update:message') 通知父組件更新 parentMessage。

2. 使用 v-model

使用場(chǎng)景：當(dāng) prop 需要雙向綁定時(shí)（例如表單輸入），使用 v-model 是一種簡(jiǎn)潔的方式。它本質(zhì)上是對(duì)事件發(fā)射的封裝，適合需要頻繁更新的場(chǎng)景。

代碼示例：

// 父組件
<template>
  <div>
    <Child v-model:message="parentMessage" />
    <p>父組件值：{{ parentMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const parentMessage = ref('Hello from parent');
</script>

// 子組件
<template>
  <div>
    <input v-model="localMessage" />
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  message: String
});

const emit = defineEmits(['update:message']);

const localMessage = computed({
  get() {
    return props.message;
  },
  set(value) {
    emit('update:message', value);
  }
});
</script>

解釋：

父組件使用 v-model:message 將 parentMessage 綁定到子組件，實(shí)際上是監(jiān)聽(tīng) update:message 事件并傳遞 prop。
子組件通過(guò) computed 創(chuàng)建一個(gè)計(jì)算屬性 localMessage，其 getter 返回 prop 值，setter 觸發(fā) update:message 事件。
輸入框的值改變時(shí)，localMessage 的 setter 會(huì)被調(diào)用，通知父組件更新 parentMessage。

3. 模擬 .sync 修飾符的功能

使用場(chǎng)景：在 Vue 2 中，.sync 修飾符用于雙向綁定 prop，但在 Vue 3 中被移除?？梢酝ㄟ^(guò)顯式的事件發(fā)射實(shí)現(xiàn)類似功能，適合需要更新特定 prop 的場(chǎng)景。

代碼示例：

// 父組件
<template>
  <div>
    <Child :message="parentMessage" @update:message="parentMessage = $event" />
    <p>父組件值：{{ parentMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const parentMessage = ref('Hello from parent');
</script>

// 子組件
<template>
  <div>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
const props = defineProps({
  message: String
});

const emit = defineEmits(['update:message']);

const updateMessage = () => {
  emit('update:message', 'New message from child');
};
</script>

解釋：

父組件監(jiān)聽(tīng) update:message 事件，并直接將事件參數(shù)賦值給 parentMessage。
子組件在按鈕點(diǎn)擊時(shí)通過(guò) emit 發(fā)射 update:message 事件，攜帶新值。
這種模式與 Vue 2 的 .sync 類似，但需要手動(dòng)實(shí)現(xiàn)。

4. 使用 ref 或 reactive

使用場(chǎng)景：當(dāng) prop 是一個(gè)對(duì)象或數(shù)組時(shí)，可以將它包裝在 ref 或 reactive 中傳遞給子組件。子組件可以直接修改這些值，因?yàn)樗鼈兪琼憫?yīng)式的。這種方式適合復(fù)雜數(shù)據(jù)結(jié)構(gòu)的場(chǎng)景，但可能模糊單向數(shù)據(jù)流的邊界。

代碼示例：

// 父組件
<template>
  <div>
    <Child :data="parentData" />
    <p>父組件值：{{ parentData.message }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import Child from './Child.vue';

const parentData = reactive({ message: 'Hello from parent' });
</script>

// 子組件
<template>
  <div>
    <input v-model="data.message" />
  </div>
</template>

<script setup>
const props = defineProps({
  data: Object
});
</script>

解釋：

父組件使用 reactive 創(chuàng)建一個(gè)響應(yīng)式對(duì)象 parentData，并將其作為 prop 傳遞給子組件。
子組件直接操作 data.message，由于它是響應(yīng)式對(duì)象，修改會(huì)自動(dòng)反映到父組件。
注意：這種方式繞過(guò)了顯式的事件發(fā)射，建議謹(jǐn)慎使用，避免數(shù)據(jù)流向不清晰。