如何将不同类型子组件的操作项暴露给父组件？

你提到的「子组件实现统一接口」是可行的方案，但还有几种更灵活、低耦合的实现方式，适合不同场景：

1. 子组件通过自定义事件主动上报操作配置 #

子组件在挂载完成后，主动将自身的操作项（图标、标识）通过自定义事件发送给父组件；父组件收集后，点击时通过组件引用调用子组件的处理函数或触发子组件事件。

代码示例（Vue 3）
子组件：

<script setup>
import { onMounted } from 'vue'
const emit = defineEmits(['report-actions', 'trigger-edit', 'trigger-delete'])

// 子组件内部的操作配置
const actions = [
  { icon: 'icon-edit', key: 'edit', label: '编辑' },
  { icon: 'icon-delete', key: 'delete', label: '删除' }
]

onMounted(() => {
  // 向父组件上报操作项
  emit('report-actions', actions)
})

// 子组件内部处理逻辑
const handleEdit = () => {
  // 编辑业务逻辑
}
const handleDelete = () => {
  // 删除业务逻辑
}

// 暴露方法给父组件调用
defineExpose({ handleEdit, handleDelete })
</script>

父组件：

<template>
  <div class="parent-container">
    <!-- 父组件渲染操作栏 -->
    <div class="action-bar">
      <button 
        v-for="action in currentActions" 
        :key="action.key"
        @click="triggerChildAction(action.key)"
      >
        <i :class="action.icon"></i>
        {{ action.label }}
      </button>
    </div>
    <!-- 动态渲染子组件 -->
    <component 
      :is="currentChildComp" 
      @report-actions="collectChildActions"
      ref="childRef"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentActions = ref([])
const childRef = ref(null)

// 收集子组件上报的操作项
const collectChildActions = (actions) => {
  currentActions.value = actions
}

// 触发子组件对应的处理函数
const triggerChildAction = (key) => {
  const methodName = `handle${key.charAt(0).toUpperCase() + key.slice(1)}`
  if (childRef.value && typeof childRef.value[methodName] === 'function') {
    childRef.value[methodName]()
  }
}
</script>

2. 维护统一的操作配置映射表 #

如果子组件类型固定，可在父组件或单独配置文件中，维护「子组件类型-操作项」的映射关系，操作项直接关联子组件的处理函数标识。父组件根据当前子组件类型直接读取配置，无需子组件额外上报。

代码示例
配置文件（action-config.js）：

export const actionMap = {
  UserCard: [
    { icon: 'icon-edit', key: 'edit', label: '编辑', method: 'handleEdit' },
    { icon: 'icon-delete', key: 'delete', label: '删除', method: 'handleDelete' }
  ],
  OrderCard: [
    { icon: 'icon-refund', key: 'refund', label: '退款', method: 'handleRefund' },
    { icon: 'icon-detail', key: 'detail', label: '详情', method: 'handleDetail' }
  ]
}

父组件：

<template>
  <div class="parent-container">
    <div class="action-bar">
      <button 
        v-for="action in actionMap[currentChildType]" 
        :key="action.key"
        @click="triggerChildAction(action.method)"
      >
        <i :class="action.icon"></i>
        {{ action.label }}
      </button>
    </div>
    <component :is="currentChildType" ref="childRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { actionMap } from './action-config.js'
const currentChildType = ref('UserCard')
const childRef = ref(null)

const triggerChildAction = (methodName) => {
  if (childRef.value && typeof childRef.value[methodName] === 'function') {
    childRef.value[methodName]()
  }
}
</script>

3. 使用 Provide/Inject 实现操作项共享 #

父组件提供一个注册操作项的方法，子组件注入该方法并注册自身的操作项（直接绑定处理函数），父组件直接调用绑定的函数即可，无需通过引用或事件传递。

代码示例
父组件：

<script setup>
import { provide, ref } from 'vue'
const currentActions = ref([])

// 提供注册操作的方法给子组件
const registerActions = (actions) => {
  currentActions.value = actions
}
provide('registerActions', registerActions)
</script>

<template>
  <div class="action-bar">
    <button 
      v-for="action in currentActions" 
      :key="action.label"
      @click="action.handler()"
    >
      <i :class="action.icon"></i>
      {{ action.label }}
    </button>
  </div>
  <component :is="currentChildComp" />
</template>

子组件：

<script setup>
import { inject, onMounted } from 'vue'
const registerActions = inject('registerActions')

// 子组件内部处理逻辑
const handleEdit = () => { /* 编辑逻辑 */ }
const handleDelete = () => { /* 删除逻辑 */ }

onMounted(() => {
  // 直接把处理函数注册给父组件
  registerActions([
    { icon: 'icon-edit', label: '编辑', handler: handleEdit },
    { icon: 'icon-delete', label: '删除', handler: handleDelete }
  ])
})
</script>

方案对比 #

• 自定义事件上报：子组件自主性强，无需强制实现统一接口，灵活度高，适合子组件类型多变的场景
• 映射表方案：集中管理操作配置，父组件逻辑清晰，适合子组件类型固定、操作项变化少的场景
• Provide/Inject：无需通过组件引用或事件层层传递，适合嵌套较深的组件结构

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