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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解Vue底部导航栏组件
May 02 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 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
phpmyadmin操作流程
2006/10/09 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
prototype 的说明 js类
2006/09/07 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
使用Vue实现简单计算器
2020/02/25 Javascript
python实现百度语音识别api
2018/04/10 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
模范家庭事迹材料
2014/02/10 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
安全月宣传标语
2014/10/07 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python