vue中实现动态增加、删除子组件,并获取子组件的值(或批量执行子组件的方法)
当点击添加入库时,自动增加一个相同的form表单组件,当点击删除时,删除当前的组件add-wu-zi即为组件,给items默认有一个对象,对象中默认带有一个nowTime属性,这个之后会说当点击添加入库时,给items增加一个对象,然后组件v-for遍历items即可,但是:key不能使用index,因为使用了index,在你移除掉一个组件的时候,index会重新排序,会修改,导致你删除的组件永远
·
当点击添加入库时,自动增加一个相同的form表单组件,当点击删除时,删除当前的组件
add-wu-zi即为组件, 给items默认有一个对象,对象中默认带有一个nowTime属性,这个之后会说
当点击添加入库时,给items增加一个对象,
然后组件v-for遍历items即可,但是:key不能使用index,因为使用了index,在你移除掉一个组件的时候,index会重新排序,会修改,导致你删除的组件永远是从最后一个删除,不会删除你想要删除的那个组件。所以我这里增加了nowTime属性,用当前时间戳作为key,便能解决这个问题,使用对象中不重复的其他属性也是可以的。
删除子组件
(子组件中的方法)
(父组件中)
如何在确定的时候获取所有子组件中表单的值
首先给子组件绑定一个ref
然后通过便利去执行子组件中的方法
然后子组件执行方法,将组件中的表单值发送给父组件
然后执行addChildForm方法,把form的值添加到allForm对应的位置,即可获取固定的form和动态增加的组件中form的值
更多推荐
已为社区贡献7条内容
所有评论(0)