懒惰等于将一个人活埋。——泰勒
我们知道v-model可以用于input等标签，当做语法糖进行绑值
对于我们自定义的组件，其实也可以使用
官方文档
例如此处我们可以让input改变值时，父组件绑定的值一并改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<input
type="checkbox"
:checked="value"
@change="$emit('input', $event.target.checked)"
/>
</template>
<script>
export default{
props:{
value:{
type:Boolean,
default:()=>false
}
}
}
</script>
|
父组件
1
| <base-checkbox v-model="lovingVue"></base-checkbox>
|
当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新
我们还可以使用model给这这个v-model绑定的prop和事件取别名：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)"
/>
</template>
<script>
export default{
model: {
prop: 'checked',
event: 'change'
},
props:{
value:{
checked: Boolean,
default:()=> false
}
}
}
</script>
|
此处用v-bind:value一样的效果
1
| <base-checkbox :value="lovingVue"></base-checkbox>
|