需求描述

近期项目中有个需求，点击编辑内容，弹出抽屉进行编辑。点击抽屉中的取消按钮，抽屉收起。
组件数据绑定使用了
v-model:is-visible='isVisible'
但写成了缩写形式：
:is-visible='isVisible'

问题

对于以上写法，缩略形式，可以用于向子组件传递属性，
但是，如果需要通过子组件反向更新父页面的值（如点击取消，更新isVisible使得抽屉关闭），必须使用v-model:is-visible完整写法。
否则在子组件用emit('update:isVisible', false)无效。

以上实现过程

1、封装一个抽屉组件
2、在父页面中引入抽屉组件
3、父当点击按钮，抽屉出现，需要在父页面中定义一个变量用于控制组件显示（这里命名为isVisible）
4、当点击子组件的取消按钮，用emit('update:isVisible', false)修改父页面的变量值，让抽屉消失
抽屉组件：

<template>
  <a-drawer
    :visible="isVisible"
  >
    any content
    <!-- 点击关闭抽屉 -->
    <a-button @click="cancel">
      关闭抽屉
    </a-button>
  </a-drawer>
</template>

<script setup>
// 从父组件接收一个isVisible属性，用于控制抽屉的显示与隐藏
const props = defineProps({
  isVisible: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits([
  'update:isVisible'
])
// 定义一个取消方法，用于关闭抽屉
// 将父组件传入的isVisible属性设置为false，即可关闭抽屉
// 注意这里需要修改父组件中的数据（isVisible属性）
function cancel () {
  emit('update:isVisible', false)
}
</script>

父组件：

<template>
  <!-- 引入抽屉组件，并传入isVisible属性用于控制抽屉开启和隐藏 -->
  <DrawerDemo
    :is-visible="isDrawerVisible"
  />
  <a-button @click="isDrawerVisible=true">
    打开抽屉
  </a-button>
</template>

<script setup>
import DrawerDemo from './DrawerDemo.vue'

const isDrawerVisible = ref(false)
</script>

注意：以上做法中，使用了 :visible="isVisible" 这种缩略写法，可以点击按钮打开抽屉，但在抽屉中点击关闭按钮，并不能关闭。原因是 :visible="isVisible" 是单向传递数据，只能由父传子。
需要双向传递，即抽屉中的方法修改父组件的isVisible值，就需要用 v-model:is-visible="isDrawerVisible" 完整写法。

<template>
  <!-- 引入抽屉组件，并传入isVisible属性用于控制抽屉开启和隐藏 -->
  <DrawerDemo
    v-model:is-visible="isDrawerVisible"
  />
  <a-button @click="isDrawerVisible=true">
    打开抽屉
  </a-button>
</template>

<script setup>
import DrawerDemo from './DrawerDemo.vue'

const isDrawerVisible = ref(false)
</script>

真是基础不牢地动山摇……供各位同学参考。

以上内容若有误，请各位指出，避免误导更多人。