vue中特殊的prop和事件
我们知道v-model可以用于input等标签，当做语法糖进行绑值
对于我们自定义的组件，其实也可以使用
例如此处我们可以让input改变值时，父组件绑定的值一并改变
<template>
<input
type="checkbox"
:checked="value"
@change="$emit('input', $event.target.checked)"
/>
</template>
<script>
export default{
props:{
value:{
type:Boolean,
default:()=>false
}
}
}
</script>父组件
<base-checkbox v-model="lovingVue"></base-checkbox>当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新
我们还可以使用model给这这个v-model绑定的prop和事件取别名：
<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一样的效果
<base-checkbox :value="lovingVue"></base-checkbox>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读