Vue3中子組件改變父組件傳過來的值(props)的方法小結

更新時間：2025年04月01日 09:56:16 作者：匹馬夕陽

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

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

使用場景：當子組件需要顯式通知父組件更新 props 的值時，事件發(fā)射是一種常見且推薦的方式。這種方法清晰地表達了數(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)聽 props 的變化，同步本地值
watch(() => props.message, (newVal) => {
  localMessage.value = newVal;
});

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

解釋：

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

2. 使用 v-model

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

代碼示例：

// 父組件
<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 綁定到子組件，實際上是監(jiān)聽 update:message 事件并傳遞 prop。
子組件通過 computed 創(chuàng)建一個計算屬性 localMessage，其 getter 返回 prop 值，setter 觸發(fā) update:message 事件。
輸入框的值改變時，localMessage 的 setter 會被調(diào)用，通知父組件更新 parentMessage。

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

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

代碼示例：

// 父組件
<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)聽 update:message 事件，并直接將事件參數(shù)賦值給 parentMessage。
子組件在按鈕點擊時通過 emit 發(fā)射 update:message 事件，攜帶新值。
這種模式與 Vue 2 的 .sync 類似，但需要手動實現(xiàn)。

4. 使用 ref 或 reactive

使用場景：當 prop 是一個對象或數(shù)組時，可以將它包裝在 ref 或 reactive 中傳遞給子組件。子組件可以直接修改這些值，因為它們是響應式的。這種方式適合復雜數(shù)據(jù)結構的場景，但可能模糊單向數(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>

解釋：