Question

我需要一些关于laravel中的vue的帮助来添加子vue组件。

我有一个名为＆＃34; wrapper＆＃34;的父组件。和一些名为＆＃34; show-1＆＃34;，＆＃34; show-2＆＃34;，＆＃34; show-3＆＃34; ......等等。

父组件

<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>

子组件例如＆＃34; show-1＆＃34;如下所示

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

以下代码位于带有动态子组件名称

的渲染包装器组件的刀片中

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

此代码无效但如果我更改父视图数据＆＃34; show-1＆＃34;它不是空的，而是有效的。为什么？

当我更改视图prop或whatelse时，应更改子vue组件。我怎么能这样做？

我想动态地将view属性传递给父组件。

Answer 1

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

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

<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动态添加子组件

2 个答案: