关于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 防止其他因素影响

有了这颗糖，封装组件的时候事半功倍