如何在 Vue+typescript 中为 Angular 创建 Web 组件？答案

【问题标题】：How to create Web-component in Vue+typescript for Angular?如何在 Vue+typescript 中为 Angular 创建 Web 组件？
【发布时间】：2021-10-11 13:04:29
【问题描述】：

我使用vue-custom-element 在 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（而不是 javascript）和相同的代码中使用 typescript 和 vue-class-component 时，我在 Angular 中看不到 web-component。 Vue+ts 计算器也可以在单独的应用程序中使用。可能是什么问题？

【问题讨论】：

标签： javascript angular vue.js web-component

【解决方案1】：

正确答案：

在打字稿上而不是

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

我们应该使用

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

或

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

【讨论】：