vue3之弹窗，抽屉二次封装 v-model=“visible” 踩坑

功能：

问题描述：

当二次封装弹窗或者抽屉时，从父组件传visible给子组件时，子组件用v-model接收控制显示，控制台会报错

解决：

 父组件在调用抽屉组件，给抽屉组件传控制显示的值时写法 v-model:visible

<!-- 抽屉  v-model:要传值的key-->
        <view-drawer v-model:visible="visible">
            <div>
                <detail @exposeData="exposeData" ref="details" :count="count"></detail>
                <!-- <detail  ref="details" :count="count"></detail> -->

            </div>
        </view-drawer>

子组件（抽屉组件）在使用父组件传过来控制显示的值时 不能使用 v-model了 要用:model-value来双向绑定

<template>
    <el-drawer size="40%" :model-value="visible" :show-close="false">
        <template #header="{ close}">
            <div  class="drawer-close-btn" @click="dialogShow">
                <el-icon><Close /></el-icon>
            </div>
        </template>
        <el-scrollbar>
            <div class="drawer-content-wrap">
                
                <slot></slot>
            </div>
        </el-scrollbar>
        <template #footer>
            <div class="drawer-footer-btn">
                <el-button>
                    {
   
   {btn1}}
                </el-button>
                <el-button  type="info">
                    {
   
   {btn2}}
                </el-button>
              
            </div>
        </template>
    
</el-drawer>
<script setup>
import {Close} from '@element-plus/icons-vue'
import {toRefs,ref,computed} from 'vue'
    const props = defineProps({
        visible: {
            type:Boolean,
            default:true
        },
        btn1: {
            type:String,
            default:'取消'
        },
        btn2: {
            type:String,
            default:'自定义'
        }
    })
    const emit = defineEmits(['update:visible'])
    //组件自己关闭修改父组件传来的值
    const dialogShow =()=>{
        emit('update:visible', false)
    }


  
</script>