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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JS实现动态星空背景效果
Nov 01 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
与数据库连接
2006/10/09 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php遍历CSV类实例
2015/04/14 PHP
php实现的xml操作类
2016/01/15 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Python+django实现文件上传
2016/01/17 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python实现IOU计算案例
2020/04/12 Python
Python实现SMTP邮件发送
2020/06/16 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
保护动物倡议书
2014/04/15 职场文书
学校2014年度工作总结
2014/12/06 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
观后感开头
2015/06/19 职场文书
MySQL之DML语言
2021/04/05 MySQL