vue3父子傳值實現彈框功能的示例詳解

更新時間：2023年12月07日 10:48:28 作者：Kyrie_mvp

這篇文章主要為大家詳細介紹了vue3如何利用父子傳值實現彈框功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下

需在父組件中點擊按鈕然后彈出子組件的彈框

1 父組件

<template>	
    <generateDialog :drawer="drawer"></generateDialog>   //bind綁定子組件
     {{   drawer   }}       // 看是否父更改了狀態(tài)
    <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>

到此這篇關于vue3父子傳值實現彈框功能的示例詳解的文章就介紹到這了,更多相關vue3彈框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: