Vue3动态组件Props多层代理问题及名称回传的正确实现方式

核心问题定位 #

1. computed返回值逻辑错误：你的pages是数组结构，但computed中返回{...pages.value}会将数组转为以索引为键的对象，后续forEach能执行但不符合数组操作的预期逻辑，容易引发数据结构混乱。
2. props传递方式错误：动态组件中使用:props="component.props"，是将整个props对象作为一个名为props的单一属性传递给子组件，而非将对象内的属性展开为子组件的独立props，导致子组件无法直接通过props.name访问目标值。
3. 响应式属性新增问题：直接给响应式对象新增属性时，若未通过响应式API处理，新增属性不会具备响应式特性，可能导致访问异常。

修正步骤 #

1. 修复computed返回值

确保component返回数组类型，与pages结构保持一致：

const pages = ref([
  {
    id: 0,
    name: null,
    props: {
      // 初始props属性
    }
  },
  // 其他页面配置项
])

const component = computed(() => pages.value ? [...pages.value] : [])

2. 修正动态组件的props传递

使用v-bind展开props对象，将对象内的每个属性作为独立prop传递给子组件：

<keep-alive>
  <component 
    :is="component.name" 
    :key="component.id" 
    v-bind="component.props" 
    @updateName="nameUpdate" 
  />
</keep-alive>

如果子组件确实需要接收整个props对象作为单一prop，需在子组件中明确定义：

// 子组件代码
const props = defineProps({
  props: Object
})
// 此时访问name需使用 props.props.name

3. 正确更新响应式数据

无需使用toRaw，直接修改响应式数组内的对象属性即可。若需给props新增响应式属性，使用扩展运算符重新赋值（或Vue.set处理嵌套对象）：

const nameUpdate = (newName) => {
  pages.value.forEach(step => {
    if (step.name === null) {
      step.name = newName
      // 给props新增name属性并保持响应式
      step.props = { ...step.props, name: newName }
      // 嵌套对象场景也可使用：
      // import { set } from 'vue'
      // set(step.props, 'name', newName)
    }
  })
}

4. 子组件正确接收props

确保子组件明确定义需要接收的prop：

// 子组件代码
const props = defineProps({
  name: String
})

完成以上修改后，子组件即可正常通过props.name访问回传的值，同时保证数据的响应式更新。

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