老师你好，关于这节课留的作业有点不明白

来源：5-12 ValidateForm 编码第四部分 - 大功告成

qq_我在时光机里找回忆

2020-11-17

老师你好。
我觉得课后作业，在提交的时候让里面的input清空，思路应该是这样的——①在App.vue组件这里的监听的自定义提交事件的函数里，触发某个自定义事件，如"ready-clear-input"，通知组件准备清空，②组件监听"ready-clear-input"事件，“ready-clear-input"触发后，组件就触发自定义事件"clear-input”,③组件监听"clear-input"，事件触发后，它让input的value绑定的值变成空字符串，并触发update:modelVal事件。像这样。

// 清空input里的内容
    const toClearInput = () => {
      // 先把ref对象里的当前值清空
      inputRef.val = ''
      // 发送自定义事件，通知父组件来更新
      context.emit('update:modelValue', '')
    }

然后我确实点击提交按钮后，input都清空了，但是我想问几个问题：

我刚才讲的这个思路对吗？
我清空input的时候，是用了之前说的v-modal那节讲的，不仅修改了inputRef.val，又触发了’update:modelValue’事件，这两个步骤都是必要的吗？（我发现去掉后一句，input也能清空）（我认为是必要的，因为前者是让model层影响视图层，后者是视图层通知父组件的model层改变，这才是完整的双向绑定。我的理解对吗？）
我做了个大胆的尝试，在app.vue中放了两个组件，第一个的提交事件回调里，触发了自定义事件"ready-clear-input"，准备清空input，第二个的提交事件回调里并没有。结果是，点击第二个表单的提交按钮，并没有发生清空，但是点第一个表单的提交按钮的时候，两个表单里的input全部清空了。我是有预见过这种情况的，毕竟并不知道到底是不是自己外层的form触发了这个事件，可以理解，但是这样不是用户期待的，万一有的表单填错了并不希望被清空怎么办。这个问题有办法解决吗，还是说我把两个表单放在一起的想法是想太多了？

写回答

1回答

张轩

2020-11-19

已采纳

同学你好谢谢你的认真完成作业你说的思路是没有问题的。

第一个问题和第二个问题：你这种思路是可以的，理解也是正确的

第三个问题现在的实现方式有些瑕疵，多表单的问题请参考这里 http://coding.imooc.com/learn/questiondetail/210555.html

最后我说说的我的想法，清空内容这种行为，我更把它看成是一个操作，而不是一个事件。用事件来实现，从正常人的认知上来说我觉得是有点奇怪的，但是如果是组件实例上面的一个方法，然后调用它就清空所有的 inputs。就更加 make sense。所以我的实现方式是这样的（伪代码）：

<ValidateForm ref="formRef" />

...
formRef.value.clearInputs()

qq_我在时光机里找回忆

weixin_慕田峪131215

同学你好，我给一下我的部分代码给你看看哦。在ValidatedForm的setup里面，定义一个方法，这里面发送一个自定义事件： // 让里面的input清空 const resetForm = () => { emitter.emit('clear-input') } 在ValidateInput的setup里面，监听这个事件，并且准备好相关的事件回调： // 清空input里的内容 const toClearInput = () => { // 先把ref对象里的当前值清空 inputRef.val = '' // 发送自定义事件，通知父组件来更新 context.emit('update:modelValue', '') } // 监听清空input的事件 emitter.on('clear-input', toClearInput)

2020-12-21

共4条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

关于上一节课的作业

回答 1

老师这跳了这么多，萌新咋办呀？

回答 2

老师你好，为什么这节课里修改组件样式不用穿透呢

回答 1

本门课程考试

回答 1

关于函数的类型别名

回答 1

打开慕课网App查看更多内容