如何将操作ElDatePicker内部元素的Vue2代码转为Vue3 Options API？

在Vue3的Options API中，获取Element Plus的ElDatePicker内部元素的方式和Vue2存在细微差异，以下是调整后的可用代码：

模板部分 #

<ElDatePicker ref="datePickerRef" />

脚本部分 #

export default {
  mounted() {
    // Vue3中组件ref直接指向根DOM元素，无需额外访问$el
    const inputElement = this.$refs.datePickerRef.querySelector('.el-input__inner')
    console.log(inputElement)
  }
}

关键差异说明 #

• Vue3里，当ref绑定到组件（如ElDatePicker）时，this.$refs.datePickerRef直接对应组件的根DOM元素，不需要再通过$el属性获取。
• 如果遇到DOM未完全渲染导致获取失败的情况，可借助nextTick确保DOM更新完成：

mounted() {
  this.$nextTick(() => {
    const inputElement = this.$refs.datePickerRef.querySelector('.el-input__inner')
    console.log(inputElement)
  })
}

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