Vue3+Ant Design 父组件调用子组件方法

最新推荐文章于 2024-07-09 21:18:14 发布

jiarg

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量278

点赞数 2

文章标签： vue.js 前端 anti-design-vue vue

本文链接：https://blog.csdn.net/weixin_38565317/article/details/137973370

版权

本文详细展示了在Vue应用中，如何通过`ref`和`props`实现父组件对子组件的控制，以及子组件如何触发回调函数以更新父组件的状态，以时间范围选择器为例进行说明。

摘要由CSDN通过智能技术生成

父组件代码

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