vue中的v-model 双向绑定事件专门用于 input组件,这只不是一种语法糖形式:input组件本身就有一个v-on绑定的input事件,每当输入框中的内容发生改变后。就会触发这个事件将当前框中的值赋值给value绑定的值
<input v-model='value'>
等价于
<input v-bind:value="value" v-on:input="value = $event.target.value">
默认情况下v-model 只接受value属性和响应input事件,但是我们可以通过model属性来改变这种情况。
model
接受有两个属性:
props:代替原来的value
event:代替原来的input事件
自定义组件
<template>
<div>
<input type="checkbox" :checked='checked'
@change='(e)=>$emit("change",e.target.checked)'>选项
</div>
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
}
props: ['checked']
}
</script>
使用
<customCheckbox v-model="checked" />