web-dev-qa-db-fra.com

Utilisation de Vue Composants dans Angular 5

J'ai un projet qui est intégré dans Vue et je veux réutiliser les composants de l'application Vue dans une Angular 5 donc je n'ai pas à aller reconstruire chaque composant à partir de zéro.

J'ai vu ce tutoriel sur un support: Comment utiliser Vue 2.0 composants dans une angular) , mais ce tutoriel est pour AngularJS.

Je me demande si quelqu'un l'a déjà fait, si cela en vaut la peine et si quelqu'un connaît des tutoriels ou des documents de référence.

javascriptangulartypescriptvue.jsangular5
14
Smokey Dawson

Enveloppez vos composants Vue comme composants natifs Web .

Étant donné que Angular prend en charge l'utilisation de composants Web personnalisés, vous pourrez utiliser les composants Vue (enveloppés sous forme de composants Web)).

Pour Angular cela ne fait aucune différence si les composants Web personnalisés ont été générés par Vue ou pas (pour tous Angular = sait, ils pourraient être des éléments HTML natifs).

Démo

DÉMO exécutable ici.

La démo est une application Angular 5. Le composant personnalisé Vue est défini dans index.html . Remarquez comment app/app.component.html il est utilisé directement dans le modèle, comme s'il s'agissait d'un élément natif.

Étape par étape ci-dessous.

In Vue

Utilisez vue-custom-element pour envelopper vos composants Vue en tant que composants 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>

Cela créera un composant Web <my-vue-web-comp> Qui peut être utilisé directement dans le DOM, sans la nécessité d'avoir un Vue.

Ce qui précède n'est qu'une démonstration exécutable directement dans le navigateur. Si vous avez des fichiers . Vue et une application vue-cli, vous devrez faire npm install vue-custom-element --save Puis créer un .js Comme:

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

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

Et puis, une fois regroupé, il générera un fichier .js Qui peut être importé directement sous la forme d'une seule balise <script>, au lieu de l'ensemble du code et des balises de script ci-dessus .

Pour plus de détails, consultez les documents de vue-custom-element .

En angulaire

Maintenant, dans l'application Angular, après avoir importé les composants Web (qu'ils soient générés par Vue ou non), configurez-les pour qu'ils soient utilisés par Angular en ajoutant schemas: [CUSTOM_ELEMENTS_SCHEMA] Dans votre @NgModule:

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

//...

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

Utilisez maintenant les composants Web (générés à partir de Vue ou non) directement dans les modèles Angular. Par exemple, le composant défini dans le code ci-dessus peut être utilisé comme:

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

En fait, la démo exécutable montre un exemple de cette utilisation.

Limites

Vous aurez peut-être besoin de polyfills pour une ancienne prise en charge de navigateur. Veuillez vérifier les documents de vue-custom-element pour plus de détails.

32
acdcjunior