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。