關於vue中input改變問題記錄

<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(),直接調用一遍就正常了.

重點不在問題 在解決思路,但願能幫到更多人