如何在Vue+typescript中创建web组件?



我使用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+的计算器也在一个单独的应用程序中工作。有什么问题吗?

正确答案: 用代替

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

应该使用

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

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

最新更新