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 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
prototype 的说明 js类
2006/09/07 Javascript
Javascript的闭包
2009/12/31 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
机械电子工程毕业生自荐信
2013/11/23 职场文书
毕业生自我鉴定
2013/12/04 职场文书
如何写你的创业计划书
2014/01/07 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
护士感人事迹
2014/05/01 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
学生上课说话检讨书
2014/10/25 职场文书
青岛海底世界导游词
2015/02/11 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python