在Angular 5中使用Vue组件

Question

我有一个内置的Vue一个项目，我想重新使用从Vue的应用程序的组件在角5应用程序，以便我不＆＃39; t有去从头开始重建每一个部件

。

我在medium How to use Vue 2.0 components in an angular application上看到了这个教程，但该教程适用于AngularJS。

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

Answer 1

将您的Vue组件包裹为native Web Components。

由于Angular支持使用自定义Web组件，因此您将能够使用Vue组件（包装为Web组件）。

对于Angular而言，如果自定义Web组件是由Vue生成的，则它没有区别（对于所有Angular都知道，它们可以是本机HTML元素）。

演示

Runnable DEMO here.

该演示是一个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>

这将创建一个可以直接在DOM中使用的<my-vue-web-comp> 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's docs。

在Angular中

现在，在Angular应用程序中，导入Web组件（无论是否为Vue生成），configure them to be used by Angular通过在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>

实际上，可运行的演示shows an example of that usage.

限制

您可能需要使用polyfill来支持旧浏览器。请查看vue-custom-element's docs了解详情。