前言

v-model可以实现双向数据绑定。v-model本质上是语法糖，它负责监听用户的输入事件来更新数据。

一、v-model父子传值的实现

子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件

二、举例

父组件：

<Children v-model:modelValue="showModelValue"></Chidren>

子组件：

<el-dialog :model-value="props.modelValue" title="title" width="45%" :before-close="handleClose">
</el-dialog>

interface PropsType {
  modelValue?: boolean;
}

const props = withDefaults(defineProps<PropsType>(), {
  modelValue: false,
});

const emits = defineEmits(['update:modelValue']);

const handleClose = () => {
  emits('update:modelValue', false);
};