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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
PHP常用编译参数中文说明
2014/09/27 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
详解numpy的argmax的具体使用
2019/05/27 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
python 录制系统声音的示例
2020/12/21 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
审计专业自荐信范文
2014/04/21 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android