如何使用多个组件更改片段实例？答案

【问题标题】：How to change fragment instances with multiple Components?如何使用多个组件更改片段实例？
【发布时间】：2016-06-09 06:21:14
【问题描述】：

这里，这是我的 Vue 文件。

multiselect 和 classified-basic-info 组件是片段实例。

我怎样才能改变它？

<template> 
<div>


<div>
    <multiselect :selected.sync="selected" :options="options"></multiselect>
</div>

<div>
    <classified-basic-info :form.sync="form"></classified-basic-info>
</div>

<div>
    <a href="#" @click="currentView = 'kfz'"> KFZ</a> |
    <a href="#" @click="currentView = 'kleinanzeigen'"> Kleinanzeigen</a> |
    <a href="#" @click="currentView = 'job'"> Job</a> |
    <a href="#" @click="currentView = 'immobilien'"> Immobilien</a> |

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

</div>
</template>

【问题讨论】：

标签： vue.js

【解决方案1】：

为避免实例碎片组件模板必须具有根级容器元素。

将每个模板内容放入根 DIV 元素并检查它。 Div 必须在模板内，而不是在您的示例中：

<div>
  <multiselect :selected.sync="selected" :options="options"></multiselect>
</div>

Vue guide 解释了这一点。

编辑将根 div 添加到您的模板：

<template> 
    <div>
        <div>


        <div>
            <multiselect :selected.sync="selected" :options="options"></multiselect>
        </div>

        <div>
            <classified-basic-info :form.sync="form"></classified-basic-info>
        </div>

        <div>
            <a href="#" @click="currentView = 'kfz'"> KFZ</a> |
            <a href="#" @click="currentView = 'kleinanzeigen'"> Kleinanzeigen</a> |
            <a href="#" @click="currentView = 'job'"> Job</a> |
            <a href="#" @click="currentView = 'immobilien'"> Immobilien</a> |

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

        </div>
    </div>
</template>

【讨论】：

你能解释一下我的整个模板吗？我已经用一个 div 包装了所有组件，并且用一个 div 包装了完整的组件。
@WolfgangMüller 如果您的意思是问题不仅在于多选和分类基本信息组件，那么主模板也必须有根节点。看我更新。
好的，谢谢。我不知道为什么。但是使用 vue-multiselect 导入时，每次都会出现错误。现在我复制了原始的 vue 文件并用它制作了一个自己的组件。现在它工作正常。