<!-- vue2 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model="pageTitle" />
<!-- vue3 -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
<!-- 简写为 -->
<ChildComponent v-model="pageTitle" />
// 子组件中接收参数并发射事件（Vue2与Vue3中使用参数和发射事件一致）
<div
class="checkbox"
:class="{ checked: modelValue }"
@click="handleCheck"
></div>
export default {
props: {
// v-model没有指定属性默认是：modelValue
modelValue: String
},
setup (props, ctx) {
function handleCheck () {
ctx.emit('update:modelValue', !props.modelValue)
}
return {
handleCheck
}
}
}