v-date-picker组件@dayclick事件不生效，无法传递date数据到父组件

根因说明 #

• @dayclick 是v-date-picker组件提供的自定义事件，你将事件绑定到了插槽内的原生input元素上，原生input不存在该事件，因此无法触发。
• 所有v-date-picker暴露的自定义事件，都需要绑定到<v-date-picker>标签上才会生效。

修复代码 #

你只需要调整事件绑定位置即可，需要向父组件传值时直接在事件回调内$emit即可：

<template>
    <v-date-picker 
      v-model="date"
      @dayclick="onDayClick"
    >
        <template v-slot="{ inputValue, inputEvents }">
            <input class="bg-white px-2 py-1 rounded"
              placeholder="DATE"
              :value="inputValue"
              v-on="inputEvents"
            />
        </template>
    </v-date-picker>
</template>

<script>
export default {
    data() {
        return {
            date: new Date(),
            masks: {
                input: 'YYYY-MM-DD'
            },
        }
    },
    methods: {
        // 回调默认接收选中的日期对象作为入参
        onDayClick(selectedDate) {
            console.log("选中日期", selectedDate);
            // 向父组件传递选中日期
            this.$emit('update:selectedDate', selectedDate)
        }
    }
}
</script>

替代方案 #

如果不需要监听点击日期的动作，只需要同步选中值到父组件，也可以直接监听date的变化：

export default {
    data() {
        return {
            date: new Date(),
            masks: {
                input: 'YYYY-MM-DD'
            },
        }
    },
    watch: {
        date(newVal) {
            // 直接将变化后的日期值传给父组件
            this.$emit('update:selectedDate', newVal)
        }
    }
}

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