获取Vue3DatePicker引用失败，如何程序化关闭日期选择器弹窗？

更新 #

• 已按照提示移除 ref 前的 :，更新代码后，Vue3DatePicker 引用仍为 undefined。

我给 Vue3 DatePicker 添加了自定义操作按钮（提交按钮），想获取组件引用并在点击按钮时调用 closeMenu 方法，但组件引用始终是 undefined，不清楚问题出在哪。我也参考了使用 DatePickerInstance 获取引用的示例代码，还是没解决。

我的代码如下：

<template>
  <div>
    <VueDatePicker
      v-model="startDate"
      ref="datepicker"
      inline
      :month-change-on-scroll="false"
      :on-click-outside="onClickOutside"
    >
      <template #action-buttons>
        <el-button
          @click="selectDate"
          >Select
        </el-button>
      </template>
    </VueDatePicker>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'
import type { DatePickerInstance } from '@vuepic/vue-datepicker'
import { ElButton } from 'element-plus'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

var startDate = ref(new Date())
export default {
  setup(props: Props) {
    const datepicker = ref<DatePickerInstance>(null)

    onMounted(() => {
      startDate.value = new Date(props.params.value)
    })

    const selectDate = () => {
      console.log('!datepicker: ' + datepicker.value)
      if (datepicker.value) {
        datepicker.value.closeMenu()
        const test = datepicker.value.selectDate()
        console.log('DatePicker.selectDate: ' + test)
      }
    }

    return {
      getValue: () => {
        return startDate.value
      },
      startDate,
      selectDate
    }
  },
  components: {
    VueDatePicker: VueDatePicker,
    ElButton: ElButton
  }
}
</script>

解决方法 #

核心问题是你在 setup 里定义的 datepicker ref 没有暴露给模板。Vue3 中，setup 函数返回的变量才会被模板识别，你当前的返回对象里没包含 datepicker，导致模板的 ref="datepicker" 无法绑定到你定义的这个 ref 实例。

修改步骤： #

1. 在 setup 的返回对象中添加 datepicker：

return {
  getValue: () => {
    return startDate.value
  },
  startDate,
  selectDate,
  datepicker // 新增这一行
}

2. （可选但建议）把 startDate 移到 setup 内部定义，避免全局变量带来的潜在问题：

<script lang="ts">
import { ref, onMounted } from 'vue'
import type { DatePickerInstance } from '@vuepic/vue-datepicker'
import { ElButton } from 'element-plus'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

export default {
  setup(props: Props) {
    const startDate = ref(new Date()) // 移到setup内部
    const datepicker = ref<DatePickerInstance>(null)

    onMounted(() => {
      startDate.value = new Date(props.params.value)
    })

    const selectDate = () => {
      console.log('datepicker: ', datepicker.value)
      if (datepicker.value) {
        datepicker.value.closeMenu()
        const test = datepicker.value.selectDate()
        console.log('DatePicker.selectDate: ', test)
      }
    }

    return {
      getValue: () => {
        return startDate.value
      },
      startDate,
      selectDate,
      datepicker
    }
  },
  components: {
    VueDatePicker,
    ElButton
  }
}
</script>

修改后，datepicker.value 就能正确获取到组件实例，你可以正常调用 closeMenu 和 selectDate 方法了。

内容的提问来源于stack exchange，提问作者Hokie2014