vue 子组件向父组件传递多个事件和值_父组件可以传子组件两个事件吗-优快云博客

本文链接：https://blog.youkuaiyun.com/dashanjv/article/details/106123402

本文介绍了一个基于Vue的Web应用案例，演示了如何在组件间通过$emit进行数据通信，实现日期选择与导出功能。具体展示了如何使用Element UI的日期选择器组件，并在父组件中获取子组件传递的日期数据。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
	<div id="app">
		<!-- 传递方法是 要使用 @ 符号 $emit 的名称-->
		<mycom1 @message="headerData" @outxls="outXls"></mycom1>
        {{startDate}}-----{{endDate}}
	</div>


	<template id="header">
		<el-form :model="topData" inline="">
			<el-form-item label="开始时间">
				<el-date-picker type="date" v-model="topData.start" value-format="yyyy-MM-dd" placeholder="选择结束时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker type="date" v-model="topData.end" value-format="yyyy-MM-dd" placeholder="选择结束时间"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList">查询</el-button>
				<el-button type="primary" @click="outXls">导出</el-button>
			</el-form-item>
		</el-form>
	</template>

	
</body>
<script>
	Vue.component("mycom1",{
		template:'#header',
		data() {
			return {
				topData:{
					start:"",
					end:""
				}
			}
		},
		methods: {
			getList(){
				var srt = this.topData
   				this.$emit('message',srt.start,srt.end);
			},
			outXls(){
				var srt = this.topData
   				this.$emit('outxls',srt.start,srt.end);
			}
		},
		mounted() {
			var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期

            var startM = (month+1).toString().padStart(2, "0")
            var startD = (date).toString().padStart(2, "0");

            var EndM = (month+1).toString().padStart(2, "0")
            var EndD = (date).toString().padStart(2, "0");

            var setStartDate = `${year}-${startM}-${startD}`;
			var setEndDate = `${year}-${EndM}-${EndD}`;

			this.$set(this.topData, "start", setStartDate);
            this.$set(this.topData, "end", setEndDate);
		},
	});

	
	new Vue({
		el:"#app",
		data:{
            startDate:"",
            endDate:""
        },
		methods: {
			headerData(data1,data2){
                this.startDate = data1
                this.endDate = data2
				console.log(data1)
				console.log(data2)
			},
			outXls(data1,data2){
				console.log(data1)
				console.log(data2)
			}
		},
		

	})
</script>
</html>