记录关于vue v-model 的几种使用方法摘要: model 2.2.0 新增类型：{ prop?: string,

摘要: model 2.2.0 新增类型：{ prop?: string, event?: string } 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

<component v-model='setValue'></componet>

相当于

 <component :value='setValue' @input='input'></component>

1.使用在公共input、select...组件的使用中：

父组件：<component v-model='setValue'></componet>

子组件：

<template> 
     <el-select :value="value" @change="$emit('input',$event)" >  </el-select>
</template>
<script>  
export default {      
    props:['value'], 
}
</script>

或

<template> 
     <el-input :value="value" @input="$emit('input',$event.target.value)" >  </el-select>
</template>
<script>  
export default {      
    props:['value'] 
}
</script>

或

<template> 
     <el-input :value="defaultValue" @input="$emit('setValue',$event.target.value)" >  </el-select></template>
<script>  
export default {     
    model:{
        props:'defaultValue',
        event:'setValue'
    }, 
    props:['defaultValue'] }
</script>

2、在model弹层中使用

父组件：<my-dialog v-model='showDialog'></my-dialog>

子组件：

<template> 
     <my-dialog v-if='value'> 
            ...
        <div slot="footer" class="dialog-footer"> 
             <el-button @click="">提 交</el-button> 
             <el-button @click="$emit('input',false)" >取 消</el-button>
        </div>         </my-dialog>
</template><script>  
export default {
    props:['value']
}
</script>