如何将绑定了Prop的子组件作为父组件的Prop传入？

问题根源 #

你之前的写法MyChildComponent.ChildComponentProp.value = 'xyz'是错误的——这直接修改了组件类的静态属性，会影响所有该组件的实例，完全不符合Vue的prop传递规范。Vue中组件的prop必须在实例化时通过属性传递，而非直接修改组件类本身。

正确实现方式 #

核心思路是：父组件同时接收子组件本身和子组件需要的prop参数，在父组件内部通过动态组件渲染子组件时，将prop传递给它。

Vue 3 示例

1. 子组件定义prop

<!-- MyChildComponent.vue -->
<script setup>
// 定义子组件的prop
const props = defineProps({
  childProp: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div>子组件接收的prop值：{{ childProp }}</div>
</template>

2. 父组件接收组件与prop参数

<!-- MyParentComponent.vue -->
<script setup>
const props = defineProps({
  // 接收传入的子组件
  componentProp: {
    type: Object,
    required: true
  },
  // 接收子组件需要的prop集合
  componentProps: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <!-- 使用动态组件渲染，并通过v-bind传递所有prop -->
  <component :is="componentProp" v-bind="componentProps"></component>
</template>

3. 调用父组件时传入组件与prop

<template>
  <MyParentComponent 
    :component-prop="MyChildComponent"
    :component-props="{ childProp: 'xyz' }"
  ></MyParentComponent>
</template>

<script setup>
import MyChildComponent from './MyChildComponent.vue'
import MyParentComponent from './MyParentComponent.vue'
</script>

Vue 2 示例

1. 子组件定义prop

<!-- MyChildComponent.vue -->
<script>
export default {
  props: {
    childProp: {
      type: String,
      required: true
    }
  }
}
</script>

<template>
  <div>子组件接收的prop值：{{ childProp }}</div>
</template>

2. 父组件接收组件与prop参数

<!-- MyParentComponent.vue -->
<script>
export default {
  props: {
    componentProp: {
      type: Object,
      required: true
    },
    componentProps: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<template>
  <component :is="componentProp" v-bind="componentProps"></component>
</template>

3. 调用父组件时传入组件与prop

<template>
  <MyParentComponent 
    :component-prop="MyChildComponent"
    :component-props="{ childProp: 'xyz' }"
  ></MyParentComponent>
</template>

<script>
import MyChildComponent from './MyChildComponent.vue'
import MyParentComponent from './MyParentComponent.vue'

export default {
  components: {
    MyChildComponent,
    MyParentComponent
  }
}
</script>

额外说明 #

如果需要动态更新子组件的prop，只需修改父组件传入的componentProps对象即可，Vue会自动响应并更新子组件的prop值。

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