VueJS - 加載子組件動態

Question

我試圖從Laravel的刀片模板弄清楚如何有條件地加載子/子組件

1. 我有一個主容器，這是從刀片叫：

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

2. 這裏是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'] 
   } 
   

正如你可以看到我有兩個子組件：菜單指數&測試。我想從刀片傳遞參數並顯示相應的組件。我可以避免if-else語句嗎？應該有更好的方式來做到這一點

Answer 1

你可以簡單的動態綁定組件名稱爲is產權（使用v-bind:is或:is），即：

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

關於這個真正真棒的事情是， <component>容器是被動的，您可以動態地加載/卸載/更改組件。那有多棒？ :)

欲瞭解更多信息，我鼓勵您閱讀documentation on dynamic components on the official docs。