web-dev-qa-db-ja.com

VueのコンポーネントAngular 5

Vueに組み込まれているプロジェクトがあり、VueアプリケーションのAngular 5アプリケーションなので、すべてのコンポーネントを最初から再構築する必要はありません。

このチュートリアルを見ました： 使用方法Vue 2.0コンポーネントでangularアプリケーション ですが、このチュートリアルはAngularJS向けです。

誰かがこれを以前にやったことがあるのか​​、それが価値があるのか​​、そして誰かがチュートリアルや参考資料を知っているのかどうか疑問に思っています。

javascriptangulartypescriptvue.jsangular5
14
Smokey Dawson

Vueコンポーネントを nativeWeb Components としてラップします。

Angular=カスタムWebコンポーネントの使用をサポートしているため、Vueコンポーネント（Webコンポーネントとしてラップ）を使用できます。

To 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/[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>

これにより、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のドキュメント を確認してください。

角度で

次に、Angularアプリで、Webコンポーネントをインポートした後（Vueで生成されたかどうかにかかわらず）、 Angularで使用されるように構成します にschemas: [CUSTOM_ELEMENTS_SCHEMA]を追加して、 @NgModule：

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

//...

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

Webコンポーネント（Vueから生成されます）をAngularテンプレートで直接使用します。たとえば、上記のコードで定義されたコンポーネントは次のように使用できます。

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

実際、実行可能なデモ はその使用法の例を示しています。

制限事項

古いブラウザのサポートにはポリフィルが必要になる場合があります。詳細については vue-custom-elementのドキュメント を確認してください。

32
acdcjunior