Vue3中使用defineCustomElement封装组件时如何传递插槽内容？

问题根源在于你的OUTER组件渲染ABC时，仅传递了props，未将外层传入的插槽内容传递给ABC，导致ABC无法获取插槽输入。

解决方案 #

在setup函数的context参数中可获取所有插槽内容，调用h函数时需将这些插槽作为子节点传递给ABC组件。

修改后的完整代码 #

import ABC from './ABC.vue';
import plugins from './plugins.js'
const OUTER = defineCustomElement({
    styles: style,
    props: ABC.props,
    emits: ABC.emits,
    template: {},
    setup(props, context) {
        const app = createApp();
        app.use(plugins);
        const inst = getCurrentInstance();
        Object.assign(inst.appContext, app._context);
        Object.assign(inst.provides, app._context.provides);
        
        // 关键：将插槽传递给ABC组件
        return () => h(ABC, props, context.slots);
    }
})
customElements.define('OUTER', OUTER);

说明 #

1. h函数的第二个参数应直接传入props对象，无需展开（原代码的...props是错误用法）；
2. 第三个参数传入context.slots，Vue会自动将外层的默认插槽（<div>Hello</div>）和具名插槽（#header）分配给ABC组件的对应插槽，让ABC正常渲染这些内容。

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