Vue3动态组件中如何将子组件修改后的props值回传至主文件？

问题核心 #

Vue的props是单向数据流，子组件不能直接修改父组件传递的props值，必须通过事件触发父组件更新数据；同时原代码中active是普通对象，属性修改无法触发响应式更新，需要调整为响应式对象。

具体修改方案 #

1. 优化子组件（UserName.vue） #

将合并的props对象拆分为单独props项，添加输入事件触发数据更新通知：

<template>
  <div>
    <h1>Input name:</h1>
    <!-- 绑定输入事件，实时传递最新值 -->
    <Input :value="name" @input="handleNameChange" />
    <p>{{ example }}</p>
  </div>
</template>
<script setup>
// 定义单独的props项
const props = defineProps(['name', 'example'])
// 定义用于通知父组件的事件
const emit = defineEmits(['update:name'])

// 处理输入变化，触发事件传递最新值
const handleNameChange = (newValue) => {
  emit('update:name', newValue)
}
</script>

2. 修改主文件 #

将active改为响应式对象，监听子组件事件同步数据：

<template>
  <div>
    <component 
      :is="active.page" 
      :name="active.props.name" 
      :example="active.props.example"
      <!-- 监听子组件事件，实时更新name值 -->
      @update:name="active.props.name = $event"
    />
    <!-- 示例切换按钮 -->
    <button @click="switchToNextPage">下一页</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import UserName from 'components/UserName.vue'

// 用reactive创建响应式对象，确保属性修改触发视图更新
const active = reactive({ 
  page: 'UserName', 
  props: { name: null, example: 'Dave' } 
})

// 页面切换逻辑，此时active.props已存储最新name值，可直接传递给下一页组件
const switchToNextPage = () => {
  // 假设下一页组件为UserDetail
  // active.page = 'UserDetail'
  console.log('当前输入的姓名:', active.props.name)
}
</script>

3. 简化双向绑定（可选） #

利用Vue的v-model语法糖进一步简化代码：

• 子组件中直接触发规范命名的事件：

<Input :value="name" @input="emit('update:name', $event.target.value)" />

• 主文件中使用v-model:name绑定：

<component 
  :is="active.page" 
  v-model:name="active.props.name"
  :example="active.props.example"
/>

关键说明 #

• 始终遵循单向数据流原则，子组件通过事件通知父组件修改数据
• 用reactive/ref确保数据响应式，保证修改后视图自动更新
• 后续切换页面时，active.props中存储的最新name值可直接传递给下一个组件使用

内容的提问来源于stack exchange，提问作者guyman