如何在 Angular 的 Vue+typescript 中创建 Web 组件？

Question

我使用在 Vue 中创建 Web 组件并在 Angular 中使用它。它适用于 Vue+js:

import Vue from 'vue'
import Calculator from './components/Calculator.vue'

import vueCustomElement from 'vue-custom-element'

Vue.use(vueCustomElement)
Vue.customElement('js-calculator', Calculator)

我在 Angular 中使用 index.html:

<body>
  <app-root></app-root>
  <js-calculator msg="30"></js-calculator>
</body>

它工作正常。但是当我在 Vue 中使用 typescript 和 vue-class-component（而不是 javascript）和相同的代码时，我在 Angular 中看不到网络组件。 Vue+ts 计算器也可以在单独的应用程序中使用。可能是什么问题？

Answer 1

正确答案：

在打字稿上而不是

Vue.customElement('ts-calculator', Calculator)

我们应该使用

Vue.customElement('ts-calculator', (Calculator as any).options)

或

Vue.customElement('ts-calculator', new Calculator().$options)

如何在 Angular 的 Vue+typescript 中创建 Web 组件？

How to create Web-component in Vue+typescript for Angular?

javascript

web-component

vue.js

angular