Vue组合式函数中返回绑定固定Props与事件的组件实现方案

你需要的是创建一个包装组件，在组合式函数内部封装目标组件，预先绑定好固定的props和事件，同时允许父组件传入额外的props、事件和插槽。以下是可行的实现方案：

正确实现方式 #

在组合式函数中通过defineComponent定义一个包装组件，该组件负责合并固定配置与父组件传入的参数，最终渲染目标异步组件：

import { defineAsyncComponent, defineComponent, h, ref } from 'vue';

export function useMyComposable() {
  const someRef = ref('初始值');

  // 组合式函数内的固定事件逻辑
  function submit() {
    console.log('触发组合式函数内部的submit逻辑:', someRef.value);
    // 这里可以放自定义逻辑，比如更新someRef或调用其他方法
  }

  // 定义包装组件
  const MyComponent = defineComponent({
    inheritAttrs: false, // 禁用自动继承attrs，避免多余绑定
    setup(props, { attrs, slots }) {
      // 合并固定配置与父组件传入的props/事件
      // 注意：如果想让父组件传入的onSubmit覆盖固定逻辑，把...attrs放在后面
      const mergedProps = {
        myProp: someRef,
        onSubmit: submit,
        ...attrs // 包含父组件传入的其他props和事件
      };

      // 渲染目标异步组件，传递合并后的props和插槽
      return () => h(
        defineAsyncComponent(() => import('components/MyComponent.vue')),
        mergedProps,
        slots
      );
    }
  });

  return { MyComponent, someRef };
}

父组件使用方式 #

和使用普通组件完全一致，支持传入额外props、事件和插槽：

<template>
  <MyComponent 
    :extra-prop="parentData"
    @custom-event="handleCustomEvent"
  >
    <template #header>
      自定义头部插槽
    </template>
  </MyComponent>
</template>

<script setup>
import { useMyComposable } from '@/composables/myComposable';
import { ref } from 'vue';

const { MyComponent, someRef } = useMyComposable();
const parentData = ref('父组件传递的额外参数');

function handleCustomEvent() {
  console.log('触发父组件自定义事件');
}
</script>

关键说明 #

1. 包装组件的作用：

   • 把固定的props（如someRef）和事件（如submit）预先绑定到目标组件上
   • 自动合并父组件传入的所有额外props和事件，不影响原有使用方式
   • 传递插槽，确保父组件的插槽能正常渲染到目标组件中

2. 为什么之前的尝试无效：

   • defineAsyncComponent的第二个参数是加载配置选项（如loading组件、错误组件），不是用来绑定props的
   • 直接返回h()函数的方式生成的是VNode，不是可复用的组件，无法像普通组件那样接收props和插槽
   • withDefaults仅用于给组件props设置静态默认值，不支持绑定响应式数据或事件

3. 事件优先级控制：

   • 如果希望父组件传入的onSubmit能覆盖组合式函数内的固定逻辑，调整合并顺序为{ ...attrs, onSubmit: submit }即可，父组件的事件会覆盖固定逻辑
   • 如果希望固定逻辑优先，保持原合并顺序即可

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