Instancier dynamiquement un composant

Bonjour,
J’ai une application qui est déjà en production depuis presque 1 an et demi et qui tourne sur Laravel et VueJS 2 pour certains éléments du frontend quand c’est nécessaire.
Et j’utilise souvent les composants et à certains moments, c’est devenu agaçant quand il faut déclarer le composant dans le vue html. J’ai essayé de chercher des reponses recemment mais je n’ai pas trouvé des reponses concretes à part etendre VueJS donc si quelqu’un peut me dire si possible ou pas : instancier dynamiquement un composant dans une methode par exemple ?

Exemple de cas actuel:



new Vue({
components: {
Loader
},
data: {
settings: {
active: false
}
},
methods: {
test () {
// Obliger de faire ceci
this.settings.active = true
// Et lancer les actions
}
}
})

Est ce qu’il n’y a pas moyen de faire un equivalent ?

methods: {
test () {
// Un truc comme ceci
this.xxxx(Component)

   // Et lancer les actions
 }

}

salut,

tu devrais suivre le guide de syntax pour mettre en forme ton code

(en particulier, utiliser des triple back quote pour ton code)

ton code sera plus lisible et tu auras des réponses plus facilement

Sinon je ne suis pas sûr de comprendre ton problème,

  • où est défini/utilisé Component dans ton 1er exemple ?
  • où est défini/utilisé methods/test dans le 2e ?

on parle des même methods/test dans les 2 cas ?
Il faudrait alors que le composant se référence lui-même ?

Le message ne peut etre éditer du coup je refais ici le code exemple . Le fonctionnement actuel des composants que j’utilise dans une application ou un autre composant :

<template>
    <div class="app">
        <button @click="show()">Afficher</button>
        <hello-world v-if="settings.active"></hello-world><!-- appel ici -->
    </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
    components: {
        HelloWorld // Déclarer ici
    },
    data () {
        settings: {
            active: false
        }
    },
    methods: {
        show () {
            this.settings.active = true // Afficher quand ceci est sur true
        }
    }   
}
</script>

Le comportement que j’aimerai savoir si possible

<template>
    <div class="app">
        <button @click="show()">Afficher</button>
    </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
    methods: {
        show () {
           // Declencher directement à partir d'ici le rendu du composant HelloWorld 
           // Par exemple au lieu de faire un v-if et ca monterait ou afficherait directement dans l'application
           return HelloWorld
        }
    }   
}
</script>

pourquoi pas juste ça ?

<template>
    <div class="app">
        <hello-world />
    </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'
export default {
    components: {
        HelloWorld
    },
}
</script>