vue3父子传值实现弹框功能的示例详解

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

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