Vue3新增弹窗【父子组件:父传子,子传父】

舒颜。

已于 2023-03-15 10:47:29 修改

阅读量569

点赞数 1

文章标签： vue.js javascript 前端

于 2023-03-07 09:21:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44714430/article/details/129375153

版权

该文章展示了在Vue中如何进行父子组件间的交互，包括父组件触发子组件弹窗显示，子组件通过props接收父组件数据，以及子组件通过自定义事件向父组件回传数据和调用父组件方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
	<el-button type="primary"  @click="addopenDialog"  @emit1="receive1" :loading="loadingbut">新增</el-button>

点击新增后，弹出新增弹窗

//子弹窗
	<AddSignDialog ref="addvisiableDialog" :QueryUser="tableData" @editConfirm="queryUserData"></AddSignDialog>
</template>
<script setup>
	//子组件的引用
	import AddSignDialog from "./Public/AddSignDialog.vue"
	const addvisiableDialog = ref("")
	function addopenDialog() {
	  addvisiableDialog.value.dialogVisble = true;
	}
	
	// 子傳父变量的接收
    const receive1 = (e) => {
      console.log(e)
      buName.value = e
    };
	const queryUserData = ()=>{
	}
</script>

子组件

<template>
	<el-dialog title="新增用戶信息" v-model="dialogVisble" width="20%">
	</el-dialog>
</template>
<script setup>
	import { defineProps, defineEmits } from "vue";
	//定義控制彈窗顯隱變量
	const dialogVisble = ref(false);
	//接收父組件傳過來的值[用props父传子]
	const props = defineProps({
	  DeptId:String,
	})
	// 将变量暴露出来
	defineExpose({  
	   dialogVisble
	})

	//子传父变量
	emits("emit1", data.name);
	//子组件调用父组件的方法
    const emit = defineEmits(['editConfirm'])
	emit('editConfirm', '')
</script>