javascript - 在 Angular 中使用 Vue 组件

Question

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

我在媒体上看到了这个教程: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>

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

以上只是一个直接在浏览器中运行的demo。如果你有 .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了解更多详情。