页面多个组件，根据点击次数还可以重复显示组件？_前端问题_站长_知道

---准备-----------------------------------------------
三个按钮：buttonA，buttonB，buttonC
三个组件：templateA，templateB，templateC

---思路-----------------------------------------------

点击buttonA，插入templateA，
继续点击buttonB，继续插入templateB，
继续点击buttonC，继续插入templateC，
继续点击buttonA，继续插入templateA，

---效果-----------------------------------------------

<body>
templateA，templateB，templateC,templateA
</body>

思路如上面，但是不知道，该怎么实现，没有头绪，跪求指点。

已解决悬赏分：0 - 解决时间 2022-01-16 19:17

点赞 0反对 0举报 0 收藏 0

回答3

最佳

@690865

button A、button B、button C 绑定的click事件里，设置当前组件的name，
在组件的标签里，使用is配置当前显示什么组件

支持 0 反对 0 举报

2022-01-16 14:35

@fanxinkai

vue 里组件有个is属性

支持 0 反对 0 举报

2022-01-16 15:59

@lxe524

首先把templateA，templateB，templateC,templateA分别注册成组件

data里面这样写：

    data(){
        return {
            arr:[
                    { name:'templateA' },
                    { name:'templateB' },
                    { name:'templateC' },
                    { name:'templateA' },
                ]
        }
    }

template:

    <div v-for="item in arr">
        <TemplateA v-if="item.name=='templateA'"></TemplateA>
        <TemplateB v-if="item.name=='templateB'"></TemplateB>
        <TemplateC v-if="item.name=='templateC'"></TemplateC>
    </div>

之后你只需要在按钮中绑定事件去修改arr的值就可以渲染出对应的模板

支持 0 反对 0 举报

2022-01-16 17:01