The pop-up window of vue3, the secondary packaging of the drawer v-model="visible" stepping on the pit

Function:

 

Problem Description:

When encapsulating the pop-up window or drawer twice, when the visible is passed from the parent component to the child component, the child component uses v-model to receive the control display, and the console will report an error

solve:

 When the parent component calls the drawer component and passes the control display value to the drawer component, write 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>

Subcomponents (drawer components) cannot use v-model  when using the parent component to control the displayed value. Use : model-value for two-way binding

<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>