需求描述
近期项目中有个需求，点击编辑内容，弹出抽屉进行编辑。点击抽屉中的取消按钮，抽屉收起。
组件数据绑定使用了
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>
真是基础不牢地动山摇……供各位同学参考。
以上内容若有误，请各位指出，避免误导更多人。
