Vue 3中如何向父组件传递实现通用接口的不同子组件？

需求说明 #

要实现表格每列固定渲染同一种自定义组件，不同列的组件类型可不同；组件间既有公共props（比如text），也有各自独有的props（比如链接组件的url）。

完整实现代码 #

1. 定义子组件 #

MyLinkComponent.vue（链接组件）

<template>
  <a :href="url" class="link">{{ text }}</a>
</template>

<script setup>
defineProps({
  text: {
    type: String,
    required: true
  },
  url: {
    type: String,
    required: true
  }
})
</script>

MyButtonComponent.vue（按钮组件）

<template>
  <button @click="handleClick" class="btn">{{ text }}</button>
</template>

<script setup>
defineProps({
  text: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

2. 父组件App.vue配置列与数据 #

<template>
  <Table :columns="columns" :data="tableData" />
</template>

<script setup>
import Table from './Table.vue'
import MyLinkComponent from './MyLinkComponent.vue'
import MyButtonComponent from './MyButtonComponent.vue'

// 列配置：新增props映射，指定组件props对应行数据的字段
const columns = [
  {
    title: '链接列',
    component: MyLinkComponent,
    propsMap: {
      text: 'linkText',
      url: 'linkUrl'
    }
  },
  {
    title: '按钮列',
    component: MyButtonComponent,
    propsMap: {
      text: 'buttonText'
    },
    // 可选：绑定组件事件
    events: {
      click: handleButtonClick
    }
  }
]

// 表格行数据
const tableData = [
  {
    id: 1,
    linkText: '跳转到首页',
    linkUrl: '/home',
    buttonText: '点击触发'
  },
  {
    id: 2,
    linkText: '跳转到详情',
    linkUrl: '/detail/2',
    buttonText: '查看详情'
  }
]

const handleButtonClick = () => {
  alert('按钮被点击了')
}
</script>

3. 表格组件Table.vue实现动态渲染 #

<template>
  <table border="1">
    <!-- 表头 -->
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.title">{{ column.title }}</th>
      </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.title">
          <!-- 动态渲染组件，传递props和绑定事件 -->
          <component
            :is="column.component"
            v-bind="getComponentProps(row, column.propsMap)"
            v-on="column.events || {}"
          />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
defineProps({
  columns: {
    type: Array,
    required: true
  },
  data: {
    type: Array,
    required: true
  }
})

// 根据行数据和props映射生成组件需要的props
const getComponentProps = (row, propsMap) => {
  const props = {}
  for (const [propName, fieldName] of Object.entries(propsMap)) {
    props[propName] = row[fieldName]
  }
  return props
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
}
</style>

核心要点 #

• props映射：通过propsMap字段把组件的props和行数据字段关联起来，解决不同组件props差异的问题，让表格能自动传参。
• 动态组件：用Vue的<component :is="...">语法实现组件的动态渲染，配合v-bind批量传递props，v-on绑定组件事件。
• 扩展性：如果需要给组件传静态参数，可以在列配置里加staticProps字段，在getComponentProps里合并到最终props对象中。

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