vue.js register webcomponent

Question

我正在使用vue.js并使用模板.js创建了一个Web组件。我不想将 webcomponent 发布到 npm，这就是为什么我只是把它包含在我的 vue 项目的 src/assets 目录中。

但是我收到错误

[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
    found in ---> 
        <App> at src/app.vue
            <Root>

它可以与我在资产目录中已有的另一个组件一起工作。

使用也无济于事

Vue.config.ignoredElements = ['my-component'];

因为当我在本地运行时该组件仍然是空的。

感谢您的帮助！

Answer 1

如果你在本地包含 Web 组件，你可以使用 @vue/web-component-wrapper：

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
const Component = {
  // any component options
}
const CustomElement = wrap(Vue, Component)
window.customElements.define('my-element', CustomElement)

Answer 2

以防万一，对我来说这是一个版本问题：

我的组件是这样定义的：

export default class Foo extends ScopedElementsMixin(LitElement) {
   ...
}

在 vue 中，我做到了

customElements.define('foo', Foo);

当我更新作用域元素1.x.x -> 2.x.x 时，我开始收到该错误。

因此，当我将所有内容放回1.x.x错误消失时。