vue点击按钮动态创建与删除组件功能
前端  /  管理员 发布于 3年前   643
主要功能需求点:
点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示
点击右侧创建的组件中的删除按钮,删除对应的组件
删除对应的组件之后,下方的组件位置自动上移
效果图:代码:
<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)
换个友链咯
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号