VueJS-动态加载子组件 [英] VueJS - Load child components dynamically

问题描述

我正在尝试找出如何有条件地从Laravel的刀片模板中加载子/子组件

I'm trying to figure out how to conditionally load sub/child component from Laravel's blade template

1. 我有一个主容器，正在从刀片中调用它:

1. I have a main container, which is being called from the blade:

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

这是StructureContainer.vue

Here is the 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&测试.我想从刀片传递参数并显示相应的组件.我可以避免if-else语句吗?应该有一种更好的方法

As you can see I have two child components: menu-index & test. I want to pass the parameter from blade and display the corresponding component. Can I avoid if-else statements? there should be a better way to do this

推荐答案

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

You can simply bind the component name dynamically to the is property (using v-bind:is or :is), i.e.:

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

真正令人敬畏的事情是<component>容器是反应性的，您可以动态地动态加载/卸载/更改组件.那有多棒? :)

The really awesome thing about this is that the <component> container is reactive, and you can dynamically load/unload/change the components on-the-fly. How awesome is that? :)

有关更多信息，我建议您阅读有关动态组件的文档在官方文档上.

For more information, I encourage you to read up the documentation on dynamic components on the official docs.

这篇关于VueJS-动态加载子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！