组件上使用v-model实现双向数据绑定,Vue 3.4使用defineModel

1.父组件定义变量使用v-model传递给子组件

<template>
  <div>
    <a-button @click="visible = true">确认</a-button>
    <!-- 子组件已全局注册->确认框组件 -->
    <InfoModal v-model:visible="visible" data="确认要删除吗？" />
    <!-- 原理：visible：传递变量，当子组件要改传递的变量触发自定义事件的函数@update:visible -->
    <!-- <InfoModal :visible="visible" @update:visible="visibleHandler" data="确认要删除吗？" /> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const visible = ref(false)
const visibleHandler = (val) =>{
    visible.value = val
}
</script>

2.子组件更改父组件变量

<template>
  <a-modal :width="400" title="操作确认" :visible="visible" @cancel="updateVisible(false)"
    @ok="ok">
    <p>{{ data || '是否启用此条数据？' }}</p>
   </a-modal>
</template>
<script setup lang="ts">

// vue2中一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

// 修改父组件变量
const emit = defineEmits(['update:visible']);
defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 提示的文字内容
  data?: String;
}>();

// 确认操作
const ok=()=>{
  updateVisible(false)
}
const updateVisible = (value:Boolean) => {
  emit('update:visible', value)
}

// Vue 3.4 开始就很简单不用定义emit和props，使用 defineModel('名字')
// const visible = defineModel('visible')
// 可以.value进行修改
// visible.value = false
</script>