v-model雙向綁定原理，實(shí)現(xiàn)自定義v-model

本文會隨著時間進(jìn)行更正

再次更新：2019/10/16 15:39

v-model雙向綁定原理

• <input type="text" v-model="變量">

  • 弄清楚上面的操作到底干了什么事

  • 首先，變量值和input的value屬性進(jìn)行單向數(shù)據(jù)綁定,value獲得了變量的值

  • 其次，通過@input="變量=$event.target.value"來將值綁定到變量上

  • 這樣就實(shí)現(xiàn)了雙向綁定

    <input type="text" v-model="變量">
    等價于
    <input type="text" :value="變量" @input="變量=$event.target.value">
    

自定義v-model命令

• 需要知道的幾個知識

  • 一般都是給自己寫的組件做自定義v-model，例如：<my-com v-model="變量"><my-com>

  • 將變量的值與自定義組件中的props: ["value"]定義的value進(jìn)行數(shù)據(jù)綁定，props的value獲得了變量值

  • 在自定義組件中通過$emit("input",我們想要傳遞的變量)來手動觸發(fā)input事件，將$emit的第二個參數(shù)值傳給<my-com v-model="變量"><my-com>中的變量

• 實(shí)現(xiàn)自定義v-model命令

  <!--第一步，給value綁定test變量值-->
  
   <my-v-model v-model="test"></my-v-model>
  
  <!--第二步，在自定義子組件中定義value接收傳進(jìn)來的test值-->
  
  props: ["value"]
  
  <!--第三步，將value和我們自己寫的組件里的input標(biāo)簽
  的value進(jìn)行綁定-->
  
  <input type="text" :value=value>
  
  <!--第四步，手動通過$emit觸發(fā)input事件將input標(biāo)簽的的value值傳遞給test變量-->
  
  <input type="text" :value=value @input="$emit('input',$event.target.value)">
  
  <!--實(shí)現(xiàn)了自定義v-model命令-->
  

隨手點(diǎn)個贊，謝謝大家

更多文章 我的github