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']
   }
   

正如您所看到的，我有两个子组件：menu-index＆amp;测试。我想从刀片传递参数并显示相应的组件。我可以避免if-else语句吗？应该有更好的方法来做到这一点

Answer 1

您可以简单地将组件名称动态绑定到is属性（使用v-bind:is或:is），即：

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

真正令人敬畏的是<component>容器是被动的，您可以动态地动态加载/卸载/更改组件。这有多棒？ :)

有关详细信息，建议您阅读documentation on dynamic components on the official docs。