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。