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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
纯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中的 == 运算符进行字符串比较
2006/11/26 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Python提取网页中超链接的方法
2016/09/18 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python Cookie 读取和保存方法
2018/12/28 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python实现扫雷游戏
2020/03/03 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
EJB的基本架构
2016/09/22 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
上课迟到检讨书
2014/02/19 职场文书
面试自我评价范文
2014/09/17 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
外出学习心得体会范文
2016/01/18 职场文书
《去年的树》教学反思
2016/02/18 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android