vue点击按钮动态创建与删除组件功能


Posted in Javascript onDecember 29, 2019

主要功能需求点:

  1. 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示
  2. 点击右侧创建的组件中的删除按钮,删除对应的组件
  3. 删除对应的组件之后,下方的组件位置自动上移

效果图:

vue点击按钮动态创建与删除组件功能

代码:

父组件代码(去除了css样式代码):

<template>
 <div class="home">
  <div class="container">
   <div class="addZujian">
    <div>
     <span>组件库</span>
     <span style="color:#bbb;margin-left:10px;font-size:14px;">点击使用</span>
    </div>
    <div class="zujianBtn" @click="zujian">添加组件1</div>
    <div class="zujianBtn" @click="zujian2">添加组件2</div>
   </div>
   <div class="zujianContent">
    <div>组件展示区</div>
    <!-- Vue提供了 component ,来展示对应名称的组件 -->
    <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
    <component
     v-for="(item,index) in comName"
     :is="item.name"
     :key="index"
     @func="getContent(index)"
    ></component>
   </div>
  </div>
 </div>
</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>

子组件1代码(去除了css样式代码):

<template>
 <div class="home">
  <div class="container">
   <span>我是组件1</span>
   <span class="del" @click="del">删除组件</span>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 methods: {
  del() {
   // 子组件向父组件传值(此处传递一个空值) - 父组件将执行getContent方法
   this.$emit('func','')
  }
 }
};
</script>

子组件2代码(去除了css样式代码):

<template>
 <div class="home">
  <div class="container">
   <span>我是组件2</span>
   <span class="del" @click="del">删除组件</span>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  return {};
 },
 methods: {
  del() {
   // 子组件向父组件传值(此处传递一个空值) - 父组件将执行getContent方法
   this.$emit("func", "");
  }
 }
};
</script>

总结

以上所述是小编给大家介绍的vue点击按钮动态创建与删除组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 #Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
You might like
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php while循环得到循环次数
2013/10/26 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Django权限设置及验证方式
2020/05/13 Python
python类共享变量操作
2020/09/03 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
运动会入场式解说词
2014/02/18 职场文书
公证书标准格式
2014/04/10 职场文书
读书月活动方案
2014/05/22 职场文书
假面舞会策划方案
2014/05/29 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
开学第一周值周总结
2015/07/16 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Oracle 多表查询基本语法实例
2022/04/18 Oracle