通过父组件的点击事件，对子组件弹窗进行显示隐藏控制。父子传值通信。
子组件弹窗 <ComponentsDrawer />
父组件
//:isShowDrawer="isShowDrawer" 父组件传值给子组件
//@close-drawer="closeDrawer" 子组件通过emit事件，来修改父组件的值
<ComponentsDrawer :isShowDrawer="isShowDrawer" @close-drawer="closeDrawer" />
<script setup lang="ts">
const isShowDrawer = ref(false);
function editBtnDrawer() {
isShowDrawer.value = true;
}
// 关闭弹窗
function closeDrawer() {
isShowDrawer.value = false;
}
</script>
子组件
<template>
<div class="drawer">
<el-drawer :model-value="isShowDrawer" title="I am the title" direction="rtl" :destroy-on-close="true" @close="closeDrawer">
<span>Hi, there!</span>
<template #footer>
<el-button @click="closeDrawer">取消</el-button>
</template>
</el-drawer>
</div>
</template>
<script setup lang="ts" name="componentsDrawer">
const props = defineProps({
isShowDrawer: Boolean
});
const { isShowDrawer } = toRefs(props); //数据解构
// onMounted(() => {
// console.log(isShowDrawer.value);
// });
通知父组件修改值
const emit = defineEmits(["closeDrawer"]);
function closeDrawer() {
emit("closeDrawer");
}
</script>
