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

Question

老师你好。
我觉得课后作业，在提交的时候让里面的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都清空了，但是我想问几个问题：

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

Answer 1

张轩 2020-11-19 09:37:56

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

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

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

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

<ValidateForm ref="formRef" />

...
formRef.value.clearInputs()

• 提问者 qq_我在时光机里找回忆 #1

  谢谢老师，我想起来了，之前用elementUI的时候，清空<el-form>表单里所有的<el-form-item>，确实是调用了一个方法，而不是用事件，这是想让表单“做一件事情”。
  
  但我还有一个疑问，在<validate-form>标签加上ref属性，就可以在APP.vue中获取到<validate-form>组件实例，可以调用它的方法。但是在这个方法内部，要怎么通过这个实例找到里面的<validate-input>并清空呢？这里我想不通

• 张轩 回复 提问者 qq_我在时光机里找回忆 #2

  和验证是一个道理啊 使用 emitter 试试

• weixin_慕田峪131215 回复 提问者 qq_我在时光机里找回忆 #3

  我还是不会，看看你们的代码呗

点开查看后面1条评论