在Angular 5中使用Vue组件

Question

我有一个在Vue中构建的项目,我想在Angular 5应用程序中重用Vue应用程序中的组件,因此我不必从头开始重建每个组件.

我在中等版本上看到了这个教程:如何在角度应用程序中使用Vue 2.0组件,但该教程适用于AngularJS.

我想知道是否有人之前已经这样做过,如果它值得,如果有人知道任何教程或参考资料.

Answer 1

将Vue组件包装为本机Web组件.

由于Angular支持使用自定义Web组件,因此您将能够使用Vue组件(包装为Web组件).

对于Angular,如果自定义Web组件是由Vue生成的,那么它就没有区别(对于所有Angular都知道,它们可以是本机HTML元素).

演示

这里可以运行DEMO.

该演示是一个Angular 5应用程序.Vue自定义组件定义于index.html.请注意app/app.component.html它是如何直接在模板中使用的,就像它是一个本机元素一样.

一步一步下面.

在Vue

使用vue-custom-element来包装你的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>

这将创建一个<my-vue-web-comp>可以直接在DOM中使用的Web组件,而无需具有可用的Vue实例.

以上只是一个可直接在浏览器中运行的演示.如果你有.vue文件和vue-cli应用程序,你需要做npm install vue-custom-element --save,然后创建一个.js文件,如:

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import MyElement from './MyElement.vue';

Vue.use(vueCustomElement);
Vue.customElement('my-element', MyElement);

然后,捆绑时,这将生成一个.js文件,可以直接导入为单个<script>标记,而不是上面的整个代码和脚本标记.

有关更多详细信息,请查看vue-custom-element文档.

在Angular

现在,在角应用,导入Web组件后(即他们Vue的产生与否),其配置为使用角加入schemas: [CUSTOM_ELEMENTS_SCHEMA]你@NgModule:

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>

实际上,可运行的演示显示了该用法的一个示例.

限制

您可能需要使用polyfill来支持旧版浏览器.请查看vue-custom-element文档以获取更多详细信息.