小程序uni-app 用父子组件传值的方法写一个时间选择器的公共组件($emit、prpos)

本文介绍如何使用uni-app创建一个时间选择器公共组件,通过父子组件间的prop和$emit实现传值功能。组件默认选中今天和上个月的今天,时间范围限制在一年内,确保开始时间不晚于结束时间。文中提供了具体实现代码和使用示例。
摘要由CSDN通过智能技术生成

用父子组件传值的方法写一个时间选择器的公共组件的方法

由于之前小程序里面用到很多同样的时间筛选器,近期改bug的时候就体会到了没有用公共组件的痛苦,代码量多,修改的地方较多比较麻烦,所以就封装了一个时间选择器公共方法。

在这里插入图片描述
时间选择器的功能是
1.默认选中今天和上个月的今天
2.时间选择框相差的时间不超过一年
3.开始时间不能大于结束时间
利于了vue父子组件传值的方法
父组件接收到的,这里的:hello=‘hello’ :hi='hi’是父组件往子组件内传送的值
子组件利用props来接收
在这里插入图片描述

在这里插入图片描述
点击搜索就成功的接收到值了
在这里插入图片描述
以下是代码

<template>
	<div>
		<view class="seach_demo">
			<view class="seach_box">
				<view class="serch-info-a">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							开始:
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :end="endDate" @change="bindDateChange">
								<view class="uni-list-cell-data">
									<!-- <image src="../../../static/mine/mine-arrow.png" mode="
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值