vue中v-model详解

input中使用

// v-model 是一个语法糖
<input v-model="something">

// 上面的v-model等同于下面
<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

在组件中使用v-model时
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，
但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
model 选项可以用来避免这样的冲突：

props代替掉原本 value 的值，可以自定义值
event代表掉原本 input 的触发事件，可以自定义触发事件

通过自定事件让 v-model 进行一个父子组件双向绑定的话。
v-bind:value=‘something’ 此时 value 是作为子组件接收的 Props
v-on 监听的语法糖也会有所改动，监听的并不是$event.target.value，而是回调函数中的第一个参数。

// 父组件
<button @click="show=true">打开model</button>
<demo v-model="show"></demo>
/* v-bind:value = 'show' ;   v-on:input = 'show=arguments[0]' */ 

data:function(){
    return {
        show:false
    }
}
components: {
    Demo
},

父组件隐式 v-on:input=“something = arguments[0]” 进行了监听，一但 Input 事件触发，父组件 就会执行监听回调，从而做到了双向绑定

// 子组件
<div v-show="value"> 
 <div> 
   <p>这是一个Model框</p> 
   <button @click="close">关闭model</button>
   <div v-if='show'>测试model----</div>
  </div> 
 </div>
 
 model:{
   prop:'show',
   event:'close'
 },
props: ['show'],
methods: {
  close () {
    this.$emit('close',false)
  }
}