vue 子组件向父组件传递多个事件和值

最新推荐文章于 2024-05-30 16:56:12 发布

背书包的甜瓜

最新推荐文章于 2024-05-30 16:56:12 发布

阅读量1.5k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dashanjv/article/details/106123402

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

背书包的甜瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 子组件向父组件传递多个事件和值

<!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/np.
复制链接

扫一扫

专栏目录