<template> <div class="page"> <form action="" @submit="submit" @reset="resetForm"> <inputSearch :input-value="inputValue" :inputName="word" @inputHandle='inputValueHandle'></inputSearch> <xnwInput :input-value="textareaValue" :inputName="explain"></xnwInput> <button type="primary" form-type="submit">保存</button> </form> </div> </template>
<script> export default { data() { return { inputValue:'', textareaValue:'' } }, } </script>
需求是这样的, inputSearch与xnwInput是一个input的输入框,通过:input-value传入父组件里的数据,在这两个子组件中,通过v-model双向绑定各自的value值.
在输入值后改变值后,点击保存按钮需要把两个子组件里的inputValue置为空.
submit(e) { console.log(e); if(!e.target.value){ return } // wx.removeStorage('words'); let array = PubliceService.getStoreage('words') || []; let value = e.target.value; this.inputValue = ''; this.textareaValue = ''; wx.showToast({ title:'保存成功', icon:'success', duation:1500 }); }
问题来了:
在我点击保存按钮后,两个子组件的内容并没有被清空,为什么?
解决思路:
是没有绑定成功吗?不对,我在父组件里使用一个input,给其绑定一个onchange事件,当这个改变的时候,子组件里相应的数据也会跟着变.
后来去找了官方文档,了解了vue的运行机制,只要data里返回的数据有改变,页面就会重新render,我在想是因为我现在重置为''与之前在data里定义的''为一样,所以导致页面没有再刷新,于是找到与react一样的强制刷新页面的函数forceUpdate(),直接调用一遍就正常了.
重点不在问题 在解决思路,希望能帮到更多人