角度プロジェクトでVUEJSコンポーネントを使用する方法

Vue 3.2では、VueコンポーネントAPIを使用してネイティブのカスタム要素を簡単に作成するための新しいDefineCustomElementメソッドを導入します.

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

このAPIは、開発者が任意のフレームワーク、またはすべてのフレームワークで使用することができますVUE電源UIコンポーネントライブラリを作成することができます.また、VueのWebコンポーネントを消費し、作成する上で私たちのドキュメントの新しいセクションを追加しました.

それをしましょう.
ここで角メインHTMLテンプレートで、vueカスタムコンポーネントを追加します.

<script src="https://unpkg.com/vue@next"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/vue-custom-element.js"></script> -->
<script>
  const MyVueWebComp = Vue.defineCustomElement({
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value received via "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Type something and 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 = '';
      }
    }
  })
  customElements.define('my-vue-web-comp', MyVueWebComp);
</script>

<my-app>loading</my-app> // my-app is app.component

とアプリケーション上でCustomHit ElementsRangeスキーマを追加します.モジュールです.TS

// app.module.ts
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Added for custom elements support
  ]

そして、それは、我々は角のプロジェクトの中で、VUEコンポーネントを使用することができます

// app.component
<h3>Hello, {{ name }}</h3>

<p>In index.html, a Vue component is defined using Vue and is wrapped into a Web Component using vue-custom-element.<br>

Now, in Angular's template, use it as if it were a native HTML Element (or regular native Web Component).
</p>

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

View code on github
Preview on StackBlitz