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 相关文章推荐
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
Axios取消重复请求的方法实例详解
Jun 15 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
纯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/24 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
javascript 必知必会之closure
2009/09/21 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python实现中文文本分句的例子
2019/07/15 Python
Python collections模块使用方法详解
2019/08/28 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
中学生个人自我评价
2014/02/06 职场文书
环保倡议书怎么写
2014/05/16 职场文书
作风建设整改方案
2014/10/27 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
谢师宴学生致辞
2015/07/27 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js