vue点击按钮动态创建与删除组件功能
前端  /  管理员 发布于 2年前   475
主要功能需求点:
点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示
点击右侧创建的组件中的删除按钮,删除对应的组件
删除对应的组件之后,下方的组件位置自动上移
效果图:代码:
<a href="https://www.zongscan.com/"></a>
父组件代码(去除了css样式代码):
<pre><template> <div class="home"> <div class="container"> <div class="addZujian">
<span>组件库</span>
<span style="color:#bbb;margin-left:10px;font-size:14px;">点击使用</span>
<div class="zujianBtn" @click="zujian">添加组件1
<div class="zujianBtn" @click="zujian2">添加组件2
<div class="zujianContent"> 组件展示区
<!-- Vue提供了 component ,来展示对应名称的组件 -->
<!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
<component v-for="(item,index) in comName" :is="item.name" :key="index"
@func="getContent(index)" >
</component>
</template>
<script>
// 引入子组件import zujian1 from "./zujian";import zujian2 from "./zujian2";
export default {
data() {
return {
comName: [] };
},
components: {
zujian1,
zujian2
},
methods: {
// 添加组件1
zujian() {
this.comName.push({
name: "zujian1"
});
},
// 添加组件2
zujian2() {
this.comName.push({ name: "zujian2" }); },
// 删除组件 getContent(index) { this.comName.splice(index, 1); } }};
</script>
</pre>
子组件1代码(去除了css样式代码):
<pre>
<template> <div class="home"> <div class="container">
<span>我是组件1</span>
<span class="del" @click="del">删除组件</span>
</template>
<script>export default {
data() {
return {};
},
methods: {
del() {
// 子组件向父组件传值(此处传递一个空值) - 父组件将执行getContent方法
this.$emit('func','') } }};
</script>
</pre>
子组件2代码(去除了css样式代码):
<pre>
<template> <div class="home"> <div class="container">
<span>我是组件2</span>
<span class="del" @click="del">删除组件</span>
</template>
<script>
export default {
data() {
return {};
},
methods: {
del() {
// 子组件向父组件传值(此处传递一个空值) - 父组件将执行getContent方法
this.$emit("func", ""); } }};
</script>
</pre>
以上所述是小编给大家介绍的vue点击按钮动态创建与删除组件功能,希望对大家有所帮助
博主 2021-07-07 15:37:18 赞 (0)
换个友链咯
博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..路过的靓仔 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..激光豆芽 在
为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..激光豆芽 在
阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号