Vueコンポーネントを次のようにラップしますネイティブWebコンポーネント。

Angular はカスタム Web コンポーネントの使用をサポートしているため、Vue コンポーネント (Web コンポーネントとしてラップ) を使用できるようになります。

Angular にとって、カスタム Web コンポーネントが Vue によって生成されたかどうかは関係ありません (Angular にとっては、それらはネイティブ HTML 要素である可能性があります)。

デモ

実行可能なデモはここです。

デモはAngular 5アプリです。Vueカスタムコンポーネントは次のように定義されています。index.html. どのようにapp/app.component.htmlネイティブ要素であるかのように、テンプレート内で直接使用されます。

以下に手順を順を追って説明します。

Vueで

使用vue-custom-elementVue コンポーネントを Web コンポーネントとしてラップするには:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/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>

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

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

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

//...

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

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