Instance Vue à l'intérieur d'une autre instance de Vue

Question

J'intègre Vue avec un CMS appelé AEM qui fonctionne essentiellement comme système de base de composants comme Vue fonctionne aussi. Mais au lieu d'avoir un webpack et des imports de fichiers .vue, chaque composant de ce CMS est une nouvelle instance de Vue (new Vue ({...})). Donc sur ma page j'ai beaucoup d'instances Veu qui communiquent entre elles en utilisant le même magasin (vuex).

Cela fonctionne réellement bien, mais j'ai un scénario lorsque j'ai besoin d'un composant CMS à l'intérieur d'un autre. Puisque ces deux composants sont une instance d'affichage unique et que la propriété "el" du parent inclut le "el" de l'enfant, le composant enfant ne fonctionne pas.

Je sais que ce n'est pas l'utilisation prévue de cette lib, mais est-il possible de dire ou de partager le même "contexte" sur les deux instances vue ou même une autre approche pour ce scénario.

Thx, Alexandre.

Answer 1

Il ne doit exister qu'une seule instance de Vue.

• Je vous suggère de créer unique vide par exemple Vue dans la balise body
• Toutes vos existants instances Vue transforment en composants
• enregistrer tous les composants de la racine par exemple Vue

Avec cette approche il sera bien d'imbriquer un composant dans un autre

Answer 2

Vous devez utiliser seulement one Instance de vue comme @shrpne mentionné.

Si vous gardez instanciation des instances Vue pour tous les composants, vous rencontrez des problèmes lors du débogage ou avec la communication de composants et dans l'ensemble cela devient très missy et vous manquez sur la communication parent-enfant et l'héritage fourni par Vue.

Je ne connais pas votre architecture Vue, mais je travaille actuellement sur un manuel pour travailler avec Vue dans AEM. Le principe de base est d'utiliser inline-template et vanilla-js de Vue, Pas de tapuscrit, nodeJS build, jsx ou autre chose au moment de la construction, juste vanilla-js de sorte que lorsque votre page est chargée et avant même que votre paquet js est présent , le DOM est déjà là, il vous suffit de monter les composants en instanciant une instance de Vue qui va monter tous les composants. C'est aussi génial pour le référencement (à moins que vous ne projetiez de rendre des composants Vue de côté serveur en Java ... ce qui est théoriquement possible, mais bonne chance!)

Voici un échantillon AEM/composant Vue:

<simple-counter inline-template> 
    <button v-bind:style="style" v-on:click="add">${properties.clicksText || 'clicks: '} {{ counter }}</button> 
    </simple-counter> 

JS:

Remarquez comment il ne dispose pas d'un modèle dans la JS, parce qu'il est inline ci-dessus

Vue.component('simple-counter', { 
    data: function() { 
    return { 
     counter: 0, 
     style: { 
     color: 'red', 
     width: '200px' 
     } 
    } 
    }, 
    methods: { 
    add: function() { 
     this.counter = this.counter + 1; 
     this.style.color = this.style.color == 'red' ? 'green' : 'red'; 
    } 
    } 
}) 

Vous pouvez créer plus de composants AEM de cette manière, puis à la fin de votre clientlib lorsque tous vos composants Vue ont été enregistrés, vous pouvez exécuter:

new Vue({ el: '#app'})

Ceci, bien sûr, suppose que votre page body ou un autre élément parent a l'id: app.

Dans la deuxième partie, comment activer la remontée des composants après l'envoi de la boîte de dialogue de création, vous pouvez simplement actualiser la page.

J'ai une question sur la façon dont nous pouvons re-monter des composants sans rafraîchir la page here L'idée de base est d'ajouter un événement afteredit au composant et exécuter une nouvelle instance Vue uniquement sur le composant nouvellement muté .. . travaille encore

Answer 3

Solution:

1. Remplacer tous les trucs new Vue(...) en Vue.component(...)Vue.extend(...) etc pour une meilleure gestion de l'interface.

2. Utilisez uniquement ONE sorcière exemple Vue est new Vue({...options})

3. tranche votre magasin vuex en modules.
4. Google enseignant sait tout.