vue中特殊的prop和事件

我们知道v-model可以用于input等标签，当做语法糖进行绑值

对于我们自定义的组件，其实也可以使用

官方文档

例如此处我们可以让input改变值时，父组件绑定的值一并改变

代码语言：javascript复制

<template>
	<input
      type="checkbox"
      :checked="value"
      @change="$emit('input', $event.target.checked)"
    />
</template>
<script>
    export default{
        props:{
            value:{
                type:Boolean,
                default:()=>false
            }
        }
    }
</script>

父组件

代码语言：javascript复制

<base-checkbox v-model="lovingVue"></base-checkbox>

当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新

我们还可以使用model给这这个v-model绑定的prop和事件取别名：

代码语言：javascript复制

<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一样的效果

代码语言：javascript复制

<base-checkbox :value="lovingVue"></base-checkbox>

bind checkbox 官方文档 input model

0 人点赞