父组件代码
<template>
<search-module-date ref="rangeDateRef" :option="rangeDateOption" @callBackFun="onRangeChange" />
<a-button type="default" @click="reset">重置</a-button>
</template>
<script>
import {getSearchDate} from "@views/financeReview/js/config";
import RangeDate from "@components/RangeDate/Child";
import { getSearchDate } from './js/config'
import {ref} from "vue";
import moment from "moment/moment";
export default {
name: "Parent",
components: {
RangeDate
},
setup() {
const rangeDateRef = ref(null)
const rangeDateOption = getSearchDate()
/** 时间选择事件 */
const onRangeChange = (value) => {
// 开始时间
console.log(moment(value[0]).format('YYYY-MM-DD HH:mm:ss'))
// 结束时间
console.log(moment(value[1]).format('YYYY-MM-DD HH:mm:ss'))
}
/** 重置 */
const reset = () => {
// 调用子组件方法,清空已选时间。rangeDateRef对应子组件ref的值
rangeDateRef.value.clearInput()
}
return {
reset,
rangeDateRef,
onRangeChange,
rangeDateOption
}
}
}
</script>
<style scoped>
</style>
此处的 rangeDateRef.value.clearInput()
即通过父组件调用子组件的代码实现。其中,rangeDateRef
代表子组件本体,与标签中的 ref="rangeDateRef"
对应。
子组件代码
<template>
<span> 时间 :</span>
<a-range-picker ref="range-picker" v-model:value="dateValues"
@change="onChange" format="YYYY-MM-DD HH:mm:ss" />
</template>
<script>
import {ref} from "vue";
export default {
name: "Child",
components: {},
props: {
option: {
type: Object,
defalut: () => { }
}
},
setup(props, { emit }) {
const dateValues = ref([])
// 选择事件,调用父组件方法
const onChange = (data) => {
// callBackFun对应父组件的callBackFun方法
emit('callBackFun', data)
}
// 清空选择框内容
const clearInput = () => {
dateValues.value = []
}
return {
onChange,
clearInput,
dateValues
}
}
}
</script>
<style scoped>
</style>
代码中 emit('callBackFun', data)
是子组件调用父组件的代码实现,callBackFun
对应父组件指定的实际方法。