子组件怎么知道自己需要提交?

2021-08-31 20:10:04 +08:00
 gromit1337

循环子组件,数据通过 props 传递,其中一个编辑完了之后在外面点击提交,怎么拿到子组件的数据? 大概就是这么个情况,想半天没想出来

2297 次点击
所在节点    Vue.js
16 条回复
EscYezi
2021-08-31 23:45:32 +08:00
用 store 模式可以(貌似不应该这样做
dvsilch
2021-09-01 00:04:23 +08:00
我是把数据放在父组件维护,给子组件的数据加上.sync 修饰符,然后 emit('update: propsName')保证数据同步
xiaoming1992
2021-09-01 05:45:20 +08:00
既然通过 props 传递,那子组件就应该在 onchange 或者 onblur 的时候将自身的状态往父组件抛。或者也可以用 ref,让父组件持有子组件的引用也行。
SxqSachin
2021-09-01 08:56:08 +08:00
父组件持有数据,子组件变动时反馈给父组件
gromit1337
2021-09-01 09:46:35 +08:00
@dvsilch #2 3.x 现在是用 v-model 我试了,好像不可以和 v-for 一起用
gromit1337
2021-09-01 09:55:30 +08:00
@SxqSachin #4 外面点击提交,编辑状态的子组件怎么知道自己该提交了
suyi2015
2021-09-01 10:21:16 +08:00
父组件设计数据结构 存储 子组件的取值函数(子组件初始化完成后进行设置)。

提交时父组件依次调用各个取值函数组装出完整数据。
RexG
2021-09-01 10:21:18 +08:00
可以在 v-for 中给子组件设置 ref,例如 :ref='"test"+item.id' 然后提交是的时候遍历 refs,触发子组件内部函数,函数体当然是返回子组件数据或者其他你希望的操作。

当然正常情况应该是把数据交给父组件保存,子组件只负责通过 emit 修改数据,不太清楚你这个循环子组件是干什么的?
Kimen
2021-09-01 10:23:57 +08:00
最简单的就是用 ref,还有就是 vue-bus 或者 vuex,都可以
dvsilch
2021-09-01 10:46:38 +08:00
gromit1337
2021-09-01 11:09:58 +08:00
@RexG #8 数据是在父组件里的,但是子组件里会修改
shintendo
2021-09-01 13:32:27 +08:00
@gromit1337 外面点击提交,编辑状态的子组件怎么知道自己该提交了
-------------
都说父组件持有数据了,子组件不需要知道
shintendo
2021-09-01 13:33:15 +08:00
@gromit1337 数据是在父组件里的,但是子组件里会修改
-----------
修改的时候通知父组件,而不是提交的时候
summerLast
2021-09-01 14:54:23 +08:00
有三种方式
1 $emit
2 $refs
3 vuex
summerLast
2021-09-01 14:55:31 +08:00
@summerLast v-model 和第一种类是
dvsilch
2021-09-01 15:33:45 +08:00
@gromit1337 你可能没有在 set 函数里进行$emit 通知父组件更新,因为这个值就是在父组件维护的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/799125

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX