VueJS - Kind Lastkomponenten dynamisch

Question

Ich versuche, herauszufinden, wie man bedingt laden sub/Kind-Komponente aus Laravel Klinge Vorlage

1. Ich habe einen Hauptbehälter, der von der Klinge genannt wird:

   <structure-container view='menu-index'></structure-container>

2. Hier ist die StructureContainer.vue

   <template> 
   <div> 
       //I can have if-else statement here by "view", but looking for a better solution 
       <menu-index></menu-index> 
   </div> 
   

   export default{ 
       components: { 
        'menu-index': require('./menu/IndexComponent.vue'), 
        'test': require('./menu/TestComponent.vue'), 
       }, 
       props: ['view'] 
   } 
   

Wie man sehen kann ich zwei untergeordneten Komponenten haben: Menü-Index & Test. Ich möchte den Parameter von Blade übergeben und die entsprechende Komponente anzeigen. Kann ich If-Else-Anweisungen vermeiden? sollte es einen besseren Weg geben kann, dies zu tun

Answer 1

Sie einfach den Namen der Komponente (mit v-bind:is oder :is) dynamisch an die is Eigenschaft binden, das heißt:

<div> 
    <component :is="view"></component > 
</div> 

Das wirklich genial daran ist, dass die <component> Container ist reaktiv, und Sie können die Komponenten im laufenden Betrieb dynamisch laden/entladen/ändern. Wie großartig ist das? :)

Für weitere Informationen, ermutige ich Sie, lesen Sie die documentation on dynamic components on the official docs.