vue2 v-model的语法糖
<!--父组件-->
<template>
<!--v-model 是语法糖-->
<Child v-model="model"></Child>
<!--相当于下面的代码-->
<!--v-model的默认行为是input,默认prop是value-->
<Child :value="model" @input="model = $event"></Child>
</template>
export default {
props: {
value: {
type: String,
},
},
methods: {
toggle() {
this.$emit('input', '123')
}
}
};
Vue3中的v-model
<!--父组件-->
<template>
<!--v-model 是语法糖-->
<Child v-model:value="model"></Child>
<!--相当于下面的代码-->
<Child :value="model" @update:value="model = $event"></Child>
</template>
// 子组件组件
export default {
props:{
value: String
},
setup(props,context) {
const toggle = ()=>{
context.emit('update:value', '123')
}
return {toggle};
}
}
.sync 修饰符
vue2中v-model只能对value进行双向绑定,2.3.0+ 新增.sync, 对多个prop 进行“双向绑定”。Vue3中v-model已经可以给多个prop使用进行双向绑定。
<!--父组件-->
<template>
<!--v-model 是语法糖-->
<Child :value.sync="model"></Child>
<!--相当于下面的代码-->
<Child :value="model" @update:value="model = $event"></Child>
</template>
export default {
props: {
value: {
type: String,
},
},
methods: {
toggle() {
this.$emit('update:value', '123')
}
}
};