Vue JS动态添加子组件

Question

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

我有一个名为 "wrapper" 的父组件和一些名为 "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>

一个 exmaple 子组件，如 "show-1":

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

下面的代码在 blade 中用于呈现具有动态子组件名称的包装器组件：

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

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

当我更改 view 属性时，子 vue 组件也应该更改。我该怎么做？

我想将视图属性动态传递给父组件。

Answer 1

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

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute....

<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

@Eduardo 的答案是正确的。要添加到它，将您的组件导入父级并通过数据属性:

在它们之间切换

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

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

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

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

Vue JS动态添加子组件

Dynamically add a child component in Vue JS

javascript

laravel

vue-component

vuejs2

laravel-5.4