關於vue中的語法糖v-model

開發src-在線系統的過程中，封裝了很多組件，如Dialog prompt等，在開源項目的組件中這些組件使用v-model來控制顯示，我來總結一下關於自己學習到的v-model知識

1. 使用props來控制關閉組件，emit同步變量-----props可以進行父組件到子組件的通信，我的思路把子組件控制v-if 的變量通過watch props的值來控制子組件的顯示，這樣父組件的值改變，子組件watch到改變，子組件關閉；同時我們可以單獨關閉子組件，但是需要父組件的變量保持一致，可以在關閉組件的回調中，emit一個新的event來通知父組件，子組件關閉，父組件變量改變為false狀態

 

// 父組件大致寫法
<Dialog  :show="show" @on-cancel="changeShow">

data() {
  show: true,  
},
methods: {
  changeShow(val) {
     this.show = val               
    }  
}

 2. v-model語法糖  v-model其實是一種簡寫方式，我們常見的有兩種v-model，分別是input元素上的v-model 和非input元素上

 <input v-model="price"><!-- 下行注釋的語法糖 -->
 <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值賦值給 price

data(){
return {
　　price: 20
　　}
}

對於非input元素呢，這里使用官方的例子

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

父組件

<base-checkbox v-model="lovingVue"></base-checkbox>

這里的 lovingVue 的值將會傳入這個名為 checked 的 prop。同時當 <base-checkbox> 觸發一個 change 事件並附帶一個新的值的時候，這個 lovingVue 的屬性將會被更新。

這里的change 可以是 input(input元素) click(dialog) 等等事件，具體要看是如何出發元素的狀態改變, 注意.self 防止其他因素影響

 

有了這顆糖，封裝組件的時候事半功倍