将Vue组件包装为native Web Components.

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

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

Demo

Runnable DEMO here.

该演示是一款Angular 5应用程序.Vue自定义组件在index.html中定义.请注意，在app/app.component.html中，它是如何直接在模板中使用的，就好像它是native-element 一样.

下面一步一步.

In 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组件，without不需要有一个工作的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>标记instead of the whole code and script tags above导入.

有关更多详细信息，请查看vue-custom-element's docs.

In Angular

现在，在Angular应用程序中，在导入Web组件(无论是否为Vue生成的组件)后，通过在@NgModule中添加schemas: [CUSTOM_ELEMENTS_SCHEMA]来增加configure them to be used by Angular:

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 demo shows an example of that usage.

Limitations

您可能需要polyfills来支持较旧的浏览器.请查看vue-custom-element's docs以了解更多详细信息.