Question

这就是我的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>

Answer 1

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

将每个模板内容放在根DIV元素中并检查它。 Div必须在模板内部，而不是像示例中那样在外部：

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

Vue guide解释了这一点。

修改将root 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>

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

1 个答案: