Vue3中h函数实现父子组件事件绑定传递故障排查

• 在h函数中显式传递事件回调
  用useDialog.create()结合h函数渲染子组件时，必须手动将父组件的事件处理函数通过h的第二个参数传递给子组件，Vue不会自动绑定这类动态创建组件的事件。示例代码：

  import { useDialog, h } from 'naive-ui'
  import EditEmployee from './EditEmployee.vue'
  
  const dialog = useDialog()
  
  const handleEdit = (rowData) => {
    dialog.create({
      title: '编辑员工',
      content: () => h(EditEmployee, {
        employee: rowData,
        // 绑定子组件emit的事件
        onUpdateEmployee: (updatedData) => {
          // 处理更新逻辑
          console.log('父组件接收更新数据:', updatedData)
          dialog.destroyAll()
        },
        onCancelUpdate: () => {
          // 处理取消逻辑
          dialog.destroyAll()
        }
      })
    })
  }
  

• 确保子组件正确声明并触发emit事件
  子组件需通过defineEmits明确声明要触发的事件，避免隐式emit导致父组件无法捕获：

  <template>
    <n-form>
      <!-- 表单内容 -->
      <n-button type="primary" @click="handleSubmit">提交</n-button>
      <n-button @click="handleCancel">取消</n-button>
    </n-form>
  </template>
  
  <script setup>
  const props = defineProps({
    employee: {
      type: Object,
      required: true
    }
  })
  
  // 声明要触发的事件
  const emit = defineEmits(['updateEmployee', 'cancelUpdate'])
  
  const handleSubmit = () => {
    const formData = { ...props.employee /* 补充修改后的字段 */ }
    emit('updateEmployee', formData)
    console.log('子组件触发updateEmployee')
  }
  
  const handleCancel = () => {
    emit('cancelUpdate')
    console.log('子组件触发cancelUpdate')
  }
  </script>
  

• 核对事件命名匹配
  确保父组件传递的事件名与子组件emit的名称完全一致：

  • 子组件emit('updateEmployee')对应父组件onUpdateEmployee
  • 若子组件用短横线命名emit('update-employee')，父组件需对应onUpdate-employee或onUpdateEmployee（Vue会自动转换大小写）

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