vue中实现动态增加、删除子组件，并获取子组件的值（或批量执行子组件的方法）

最新推荐文章于 2024-09-29 16:41:09 发布
最新推荐文章于 2024-09-29 16:41:09 发布
阅读量3.3k 收藏 17
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zongmaomx/article/details/107253538
版权

 当点击添加入库时，自动增加一个相同的form表单组件，当点击删除时，删除当前的组件

 

add-wu-zi即为组件， 给items默认有一个对象，对象中默认带有一个nowTime属性，这个之后会说

当点击添加入库时，给items增加一个对象，

然后组件v-for遍历items即可，但是:key不能使用index，因为使用了index，在你移除掉一个组件的时候，index会重新排序，会修改，导致你删除的组件永远是从最后一个删除，不会删除你想要删除的那个组件。所以我这里增加了nowTime属性，用当前时间戳作为key，便能解决这个问题，使用对象中不重复的其他属性也是可以的。 

删除子组件

（子组件中的方法）

（父组件中）

 如何在确定的时候获取所有子组件中表单的值

首先给子组件绑定一个ref

然后通过便利去执行子组件中的方法 

 然后子组件执行方法，将组件中的表单值发送给父组件

 然后执行addChildForm方法，把form的值添加到allForm对应的位置，即可获取固定的form和动态增加的组件中form的值

 

 

Z077
关注
在Vue.js项目中增加和删除组件
HackSquad的博客
09-21 408
在Vue.js中，我们可以通过动态地增加和删除组件来实现动态页面的构建和更新。本文将详细介绍如何在Vue.js项目中增加和删除组件，并提供相应的源代码示例。通过上述代码示例，我们可以了解在Vue.js项目中如何增加和删除组件。使用动态组件和数据绑定的能力，Vue.js使得页面的构建和更新变得非常灵活和高效。在Vue.js中，要删除组件，我们需要从Vue实例的组件列表中移除相应的组件。在Vue.js中，可以通过动态地向Vue实例中添加组件来实现组件的动态增加。在上面的代码中，我们初始化了一个包含三个组件的。
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
weixin_39979159的博客
12-22 2648
摘要： 总有一款合适的通信方式。Fundebug经授权转载，版权归原作者所有。前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景，如何选择行之有效的通信方式...
Vue 组件的动态添加与删除
m0_38029610的博客
08-27 261
<template> <section> <button @click="add()">点击添加</button> <hr/> <my-test v-for="(item, index) in people" :key="index" :index="index" :itemC="item"
vue动态加载不同组件
最新发布
kyh419的博客
09-29 405
在一个组件里，当遇到按不同条件加载不同子组件的情况时，是不是还在傻傻的用v-if、v-else-if、v-else、v-show来控制，其实可以用vue动态加载组件的方法来解决，简便且高效！
Vue组件:组件的动态添加与删除
qq_34466870的博客
06-04 1839
一、实现效果 二、实现代码 1.HelloWorld.vue <template> <div class="hello"> <child-page v-for="(item,index) in items" :key="index" :index="index" :items="items" @deleteIndex="del" @uploadData="getData"> </chi
VUE饿了么树形控件添加增删改功能
weixin_34220834的博客
10-16 1503
element-ui树形控件：地址 在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。写个开发的步骤，所以文章比较长emmm 2018.07.25更新 elementUI ^2.2.0提供了一个slot的自定义节点方法，相关代码已在g...
vue 实现在同一界面实现组件的动态添加和删除功能
10-15
主要介绍了vue 实现在同一界面实现组件的动态添加和删除,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue3父组件异步获取数据，子组件未接收到数据
m0_46627407的博客
09-01 7440
在Vue开发过程中，特别是刚上手不久的同学，很容易遇到，父组件异步获取数据传给子组件，但子组件却没有接收到的问题，如下图所示主要原因在于，当父组件异步获取数据的同时，可能耗时较长，获取到数据再传给子组件时，子组件已经渲染完毕。
vue中实现动态生成二维码的方法
10-15
总结来说，要在Vue中动态生成二维码，你需要安装`qrcodejs2`库，引入到Vue组件中，然后在适当的生命周期钩子或方法中使用`QRCode`构造函数生成二维码。同时，注意确保内容编码正确，并在DOM渲染完成后执行生成代码，...
js 获取vue组件html_vue.js组件如何通信？
weixin_39967096的博客
12-19 199
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$em...
vue点击按钮动态创建与删除组件功能
10-15
主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
在Vue组件上动态添加和删除属性方法
08-27
下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 实现列表动态添加和删除的两种方法小结
12-29
下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue 测试实例 - vue实现列表增加和删除</title> [removed][removed] </head> <body> <input v-model=newAddText placeholder=请输入要添加的内容 /> <button @click='addNew
vue+element的表格实现批量删除功能示例代码
10-18
它通常用于展示数据列表，而批量删除功能是表格组件中常见的交互方式之一，尤其在数据管理场景中非常重要。本文将详细介绍如何利用Vue和Element UI实现表格的批量删除功能。 首先，Element UI提供了一个表格组件，...
vue动态添加，或删除组件，且实现组件上下移动
m0_45218136的博客
09-13 3019
vue动态添加，或删除组件，且实现组件上下移动
Vuejs 动态组件
weixin_30952103的博客
10-18 146
http://www.cnblogs.com/-ding/p/6339740.html ①简单来说： 就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 ②动态切换： 在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示； 改变挂载的组件，只需要修改is指令的值即可。...
VUE里子组件获取父组件动态变化的值
weixin_30940783的博客
12-25 2222
在VUE里父组件给子组件间使用props方式传递数据，但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。 场景：子组件通过props获取父组件传过来的数据，子组件存在操作传过来的数据并且传递给父组件。 比如想实现一个switch开关按钮的公用组件： 1.父组件可以向按钮组件传递默认值。 2.子组件的操作可以改变父组件的数据。 3.父组件修...
Vue组件之动态组件
热门推荐
404源码社区 - Admin404
01-22 1万+
动态组件：不同组件之间进行动态切换，通过 Vue 的元素加一个特殊的 is attribute 实现 1. 基础使用 component的is 属性值是组件名，就可以调用该组件 <component is="comb"></component> <div id="app"> <component is="comb"></component> </div> <script> var coma = { t...
Vue.js高手秘籍：Watchers与组件自动化注册
在Vue中，watcher是用于监听数据变化并执行相应操作的重要工具。在常见的场景中，如监控input输入并实时更新数据，可能会导致频繁的数据获取，造成性能损耗。为了优化这一过程，我们可以使用以下策略： 1. 直接引用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值