Javascript 在Angular中使用Vue组件

我有一个在Vue中构建的项目，我想在Angular应用程序中重用Vue应用程序中的组件，这样我就不必从头开始重新构建每个组件

我在媒体上看到了这篇教程，但这篇教程是针对AngularJS的

---

我想知道以前是否有人这样做过，是否值得，是否有人知道任何教程或参考资料。

将您的Vue组件包装为

由于Angular支持使用自定义Web组件，因此您可以使用Vue组件（包装为Web组件）

对于Angular来说，自定义Web组件是否由Vue生成并没有什么区别（Angular知道，它们可能是原生HTML元素）

演示

该演示是一个Angular 5应用程序。Vue自定义组件在中定义。注意它是如何直接在模板中使用的，就好像它是一个本机元素一样

下面一步一步

在Vue 用于将Vue组件包装为Web组件：

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script>
<script>
  const MyVueWebComp = {
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value of "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Click me</button>
      <div v-for="t in texts">
        Text: {{ t }}
      </div>
    </div>
    `,
    data() {
        return {
            text: '',
            texts: []
        };
    },
    methods: {
      addText() {
        this.texts.push(this.text);
        this.text = '';
      }
    }
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>

然后，当绑定时，将生成一个

.js

文件，该文件可以作为单个

标记直接导入，而不是上面的整个代码和脚本标记

有关更多详细信息，请查看

棱角分明 现在，在Angular应用程序中，在导入Web组件（无论是否为Vue生成的组件）后，通过在

@NgModule

中添加

模式：[自定义元素\u模式]

：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

//...

@NgModule({
  // ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA  // added this
  ]
})
export class AppModule { 

现在直接在Angular模板中使用Web组件（无论是否从Vue生成）。例如，上述代码中定义的组件可用于：

<my-vue-web-comp [msg]="name"></my-vue-web-comp>

事实上，runnable演示程序

局限性

---

对于较旧的浏览器支持，您可能需要多边形填充。请查看更多详细信息。

另一个限制或要求是Angular 1.7及更高版本支持网络组件：/

<my-vue-web-comp [msg]="name"></my-vue-web-comp>