父组件代码

<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 对应父组件指定的实际方法。