父组件定义
<view>{{mes}}</view>
<input v-model="mes" />
// 效果等于下面代码,
<input v-bind:value="mes" v-on:input="mes=$event.target.value"/>
// v-model实现原理:把inpu输入框的value属性值和vue实例的mes属性进行绑定,同时监听输入事件input并把输入的值赋值给vue实例的mes
子组件接受
prop可自定义字段
model: {
prop: 'value',
event: 'change'
}
props: {
value:{
type: Boolean,
default: false
}
}
官方例子https://cn.vuejs.org/v2/api/#model
总结
所以说在默认情况下,一个组件上的使用了v-model会把value作为prop,把input事件作为event.
如