如何向通过select切换的Vue动态组件传递Props参数？

在Vue中使用<component :is="valueSelect"></component>渲染动态组件时，传递Props的方式和普通组件完全一致，直接在标签上绑定对应属性即可，以下是几种常见实现方式：

1. 直接绑定单个Props #

如果要传递固定值或响应式变量，直接像普通组件一样添加属性：

<component 
  :is="valueSelect"
  :title="pageTitle"
  :count="itemCount"
  static-text="固定文本内容"
></component>

其中:title和:count绑定的是响应式数据，static-text是静态字符串（Vue会自动将短横线命名转为小驼峰，比如static-text对应子组件内的staticText）。

2. 批量传递Props #

如果有多个Props需要传递，可通过v-bind一次性绑定一个对象：

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

<script setup>
import { ref } from 'vue'
const valueSelect = ref('ComponentA')
const componentProps = ref({
  title: '动态组件标题',
  count: 10,
  isActive: true
})
</script>

这种方式适合需要传递大量Props的场景，对象里的每个键值对都会作为Props传递给动态组件。

3. 结合计算属性动态生成Props #

如果Props需要根据选中的组件类型动态调整，可用计算属性生成对应Props：

<template>
  <component 
    :is="valueSelect"
    v-bind="dynamicProps"
  ></component>
</template>

<script setup>
import { ref, computed } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const valueSelect = ref(ComponentA)
const dynamicProps = computed(() => {
  if (valueSelect.value === ComponentA) {
    return {
      aProp: 'A组件专属参数',
      commonProp: '通用参数'
    }
  } else if (valueSelect.value === ComponentB) {
    return {
      bProp: 'B组件专属参数',
      commonProp: '通用参数'
    }
  }
  return {}
})
</script>

这种方式能根据不同的动态组件，传递对应的专属Props，同时保留通用Props。

另外，动态组件接收Props的方式和普通组件完全相同，比如在子组件中用defineProps定义接收的Props：

<script setup>
const props = defineProps({
  title: String,
  count: Number,
  staticText: String
})
</script>

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