在Vue JS中动态添加子组件

Question

在添加子vue组件方面，我需要Vue JS和Laravel方面的一些帮助。

我有一个名为“包装器”的父组件和一些名为"show-1"、"show-2"、"show-3"的子组件。等。

父组件：

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <component
                is="view"
            ></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

像“show-1”这样的示例子组件：

<template>
    <div> show-1 </div>
</template>

下面的代码位于刀片中，用于呈现带有动态子组件名称的包装器组件：

<wrapper
title="Example"
view="show-1"
></wrapper>

此代码不起作用，但如果我更改父视图数据"show-1“而不是”空“，它就能工作。为什么？

当我更改视图支柱时，子vue组件也应该被更改。我怎么能这么做？

我希望动态地将视图属性传递给父组件。

Answer 1

您可以使用:is属性。你可以在这里读到更多关于它的信息：https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

您可以使用相同的挂载点并使用保留元素在多个组件之间动态切换，并动态绑定到其is属性.

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <!-- make sure to use : -->
            <component v-if="view" :is="view"></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

Answer 2

@爱德华多有正确的答案。要添加到其中，请将组件导入父组件，并通过数据属性在它们之间切换：

...
<component :is="current"></component >
...

data: {
  current: 'show1'
},
components: {
  show1: Show1Component,
  show2: Show2Component,
  show3: Show3Component
}

关键是使用动态组件的名称绑定组件。

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components