vue3组件通信_vue3:时间戳可以传递给子组件吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/121854517

这篇博客探讨了如何在Vue3中进行组件通信，特别通过使用ElementPlus的日期区间组件为例，详细讲解了父组件如何传递数据给子组件，以及在子组件中如何接收并利用这些数据。文章介绍了两种方法，包括传统的Vue3语法和推荐的语法糖写法。

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

这里利用之前封装的elementPlus 日期区间组件来讲一下vue3组件之间的通信

父组件

<v-date-picker  @itemChange="getChangeTime"/>

const getChangeTime = (e)=>{
//获取子组件传过来的值
	//e[0]:开始日期
	//e[1]:结束日期
}

子组件接收

vDatePicker.vue

<template>
	<el-date-picker 
		v-model="Times"  
		type="daterange" 
		:range-separator="rangeName" 
		:start-placeholder="startName"
		:end-placeholder="endName" 
		@change="getTime">
	</el-date-picker>
</template>

<script>
	import {ref} from "vue";
	import utils from "../utils/utils.js"//这边主要做一个日期转换
	export default {
		props:{
			rangeName:{
				type:String,
				default:'至'
			},
			startName:{
				type:String,
				default:'开始日期'
			},
			endName:{
				type:String,
				default:'结束日期'
			},
		},
		setup(props,{ slots, attrs, emit }){
			  const Times = ref([]);
			  const getTime = ()=>{
				  if(Times.value && Times.value.length>0){
					 let arr =[utils.dateFormat(Times.value[0]),utils.dateFormat(Times.value[1])];
					 emit('itemChange', arr)//这里通过emit给父组件传值,itemChange
				  }else{
				  	emit('itemChange', [])
				  }
			  }
			  return{
				  Times,
				  getTime
			  }
			
		}
	}
</script>

vue3语法糖写法（建议）

<script setup>
	import {
		ref,
	} from "vue";
	import utils from "../utils/utils.js"
	defineProps({
		rangeName: {
			type: String,
			default: '至'
		},
		startName: {
			type: String,
			default: '开始日期'
		},
		endName: {
			type: String,
			default: '结束日期'
		},
	})

	const Times = ref([]);
	const emit = defineEmits(['itemChange'])
	const getTime = () => {
		if (Times.value && Times.value.length > 0) {
			let arr = [utils.dateFormat(Times.value[0]), utils.dateFormat(Times.value[1])];
			emit('itemChange', arr)
		} else {
			emit('itemChange', [])
		}
	}
</script>