vue点击按钮动态创建与删除组件功能
2020-02-13 10:05
615 查看
主要功能需求点:
- 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示
- 点击右侧创建的组件中的删除按钮,删除对应的组件
- 删除对应的组件之后,下方的组件位置自动上移
效果图:
代码:
父组件代码(去除了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点击按钮动态创建与删除组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- vue 点击按钮实现动态挂载子组件的方法
- vue 点击按钮实现动态挂载子组件
- Vue自定义组件实现按钮权限功能
- 详解vue 动态加载并注册组件且通过 render动态创建该组件
- Vue 仿QQ左滑删除组件功能
- js动态创建多个input框带删除按钮
- 点击按钮动态创建控件并获得值的原理及方法
- vue.js实现点击后动态添加class及删除同级class的实现代码
- vue.js 实现点击后动态添加 class 并删除同级 class
- 用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格
- 点击动态创建表格、单行删除、全选、全部一键删除
- Vue实现动态创建和删除数据
- jQuery+css3实现Ajax点击后动态删除功能的方法
- JQ点击按钮动态克隆一行表格以及删除表格
- 【前端面试题】-------实现一下,点击1个按钮的同时删除这个按钮,并创建2个新按钮
- mint UI滑动删除cellSwipe组件使用to路由跳转会跟左滑的按钮点击事件同时触发
- 学习u3d笔记(一) OnGui实现动态创建cube组件 并按钮控制cube旋转 停止 销毁
- jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
- Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件
- vue实现点击按钮下载文件功能