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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
Koa代理Http请求的示例代码
Oct 10 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
意大利男装网店:Vrients
2019/05/02 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
医科大学生的自我评价
2013/12/04 职场文书
单位办理社保介绍信
2014/01/10 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
大学生校园创业计划书
2014/02/08 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
商务信函英语问候语
2015/11/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书