vue3父子传值实现弹框功能

需在父组件中点击按钮然后弹出子组件的弹框

1 父组件

<template>	
    <generateDialog :drawer="drawer"></generateDialog>   //bind绑定子组件
     {{   drawer   }}       // 看是否父更改了状态
    <el-button @click="CanShowDrawer">点击显示弹窗</el-button>
</template>


<script setup>
   import generateDialog from './components/useModel/generateDialog.vue'; //引入子

   const drawer = ref(false); //显示弹窗

   const CanShowDrawer = () => {
	drawer.value = !drawer.value;
   };

2 子组件中的v-model渲染是重点
 

<template>
    <el-dialog title="我是标题" :with-header="false" direction="ttb" size="300px" v-model="drawerson">
    </el-dialog>
</template>

<script setup>
  import { defineProps, watch, ref } from 'vue';

  const drawerson = ref(false);

  const props = defineProps({
	drawer: {
		type: Boolean,
		default: false,
	},
  });

  watch(
	() => props.drawer,
	(newVal) => {
		drawerson.value = newVal;
		console.log('drawerson.value', drawerson.value);     //可以测试父传递的,子是否拿到了
	}
  );
</script>

效果图如下

子的完整代码如下 (父已经是完整代码了)
 

<template>
	<div class="dialog">
		<el-dialog title="我是标题" :with-header="false" direction="ttb" size="300px" v-model="drawerson">
			<div class="top">我是顶部</div>
			<div class="father">
				<el-scrollbar class="scrollbar">
					<div class="son">1</div>
					<div class="son">2</div>
					<div class="son">3</div>
					<div class="son">4</div>
					<div class="son">5</div>
					<div class="son">6</div>
				</el-scrollbar>
			</div>
			<div class="footer">
				<el-button>生成</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { defineProps, watch, ref } from 'vue';

const drawerson = ref(false);

const props = defineProps({
	drawer: {
		type: Boolean,
		default: false,
	},
});

watch(
	() => props.drawer,
	(newVal) => {
		drawerson.value = newVal;
		console.log('drawerson.value', drawerson.value);
	}
);
</script>

<style lang="less" scoped>
.dialog {
	position: relative;
	.top {
		text-align: center;
		padding-bottom: 20px;
	}
	.father {
		.scrollbar {
			height: 300px;
		}

		.son {
			min-width: 213px;
			height: 200px;
			background: #aaa;
			margin: 0 10px 10px 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.footer {
		position: absolute;
		bottom: 10px;
		right: 3%;
	}
}

:deep(.el-dialog) {
	width: 800px;
	margin: 0 auto;
}

:deep(.el-scrollbar__view) {
	display: flex;
	flex-wrap: wrap;
	height: 80%;
}
</style>