在我的VUE CustomElement (defineCustomElement)中不能工作的插槽
在我的VUE CustomElement (defineCustomElement)中不能工作的插槽
提问于 2022-10-06 05:32:36
我在VUE 3中从web上的各种来源(文档，堆栈溢出等)创建了CustomElement的初始化。
不幸的是，没有讨论过如何处理这种类型初始化中的插槽。
如果我正确理解它，它应该根据文件工作。
https://vuejs.org/guide/extras/web-components.html#slots
import { defineCustomElement, h, createApp, getCurrentInstance } from "vue";
import audioplayer from "./my-audioplayer.ce.vue";
import audioplayerlight from "./my-audioplayerlight.ce.vue";
import { createPinia } from "pinia";
const pinia = createPinia();
export const defineCustomElementWrapped = (component, { plugins = [] } = {}) =>
defineCustomElement({
styles: component.styles,
props: component.props,
setup(props, { emit }) {
const app = createApp();
plugins.forEach((plugin) => {
app.use(plugin);
});
const inst = getCurrentInstance();
Object.assign(inst.appContext, app._context);
Object.assign(inst.provides, app._context.provides);
return () =>
h(component, {
...props,
});
},
});
customElements.define(
"my-audioplayer",
defineCustomElementWrapped(audioplayer, { plugins: [pinia] })
);
customElements.define(
"my-audioplayerlight",
defineCustomElementWrapped(audioplayerlight, { plugins: [pinia] })
);我怀疑我在初始化时忘记了一些东西，并且没有传递槽的内容。
回答 1
Stack Overflow用户
发布于 2022-11-10 21:41:27
有点晚了，但是我们正在使用这种方法使用Vue 3和这个解决方法来处理Web组件，将Vue组件上下文添加到自定义元素中。
setup(props, { slots })然后：
return () =>
h(component, {
...props,
...slots
});谢谢@tony19 19，这个解决方案的作者。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73969025
复制相关文章
相似问题
腾讯云开发者
