定义插槽文件

export const WelcomPage = defineComponent({
  setup(props, { slots }) {
    return () => (
        <div>
          {slots.icon?.()} // 插槽内容所放位置, 注意是函数形式,()不要漏了
          {slots.title?.()}
        </div>
        {/* 操作按钮 */}
        <div>{slots.buttons?.()}</div>
      </div>
    );
  },
});

给插槽传数据

方法1：通过v-slots属性传递

import { WelcomPage } from "./welcomePage";
export const First = defineComponent({
  setup() {
    const slots = {
      icon: () => <img src={xxx} alt="" />,
      title: () => (
        <>
          <h2>
            这是个简单的标题
          </h2>
        </>
      ),
      buttons: () => (
        <>
          <button>按钮1</button>
          <button>按钮2</button>
        </>
      ),
    };
    return () => <WelcomPage v-slots={slots}></WelcomPage>;
  },
});

方法2：直接写到标签里

import { WelcomPage } from "./welcomePage";
export const Second = defineComponent({
  setup() {
    return () => (
      <WelcomPage>
        {{
          icon: () => <img src={xxx} alt="" />,
          title: () => (
            <h2>
             简单的标题222
            </h2>
          ),
          buttons: () => (
            <>
               <button>按钮1</button>
               <button>按钮2</button>
            </>
          ),
        }}
      </WelcomPage>
    );
  },
});