引用flatpickr v4控件编写一个可重用的自定义vue组件，实现每个弹窗中都包含清空和今天两个按钮，最后在单页面中使用该组件并绑定值

首先，需要在项目中安装flatpickr和vue-flatpickr组件：

npm install flatpickr vue-flatpickr --save

然后，可以编写一个自定义的Vue组件，代码如下：

<template>
  <div>
    <vue-flatpickr v-model="selectedDate" :config="config" @input="onChange" />
    <button @click="clearDate">清空</button>
    <button @click="setToday">今天</button>
  </div>
</template>

<script>
import Flatpickr from 'flatpickr';
import VueFlatpickr from 'vue-flatpickr';
import 'flatpickr/dist/flatpickr.min.css';

export default {
  name: 'CustomDatePicker',
  components: {
    VueFlatpickr,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selectedDate: this.value,
      config: {
        enableTime: false,
        dateFormat: 'Y-m-d',
      },
    };
  },
  methods: {
    onChange(selectedDates) {
      this.selectedDate = selectedDates[0] ? selectedDates[0].toISOString().split('T')[0] : '';
      this.$emit('input', this.selectedDate);
    },
    clearDate() {
      this.selectedDate = '';
      this.$emit('input', '');
    },
    setToday() {
      const today = new Date();
      this.selectedDate = today.toISOString().split('T')[0];
      this.$emit('input', this.selectedDate);
    },
  },
};
</script>

在该组件中，使用了vue-flatpickr来生成日期选择器，同时添加了清空和今天两个操作按钮。当用户选择日期时，会触发onChange事件，将选中的日期存储到selectedDate中，并通过$emit事件将该值传递给父组件。清空和今天两个按钮的操作也通过$emit事件将操作结果传递给父组件。

最后，在单页面中使用该组件，并绑定值，代码如下：

<template>
  <div>
    <custom-date-picker v-model="selectedDate" />
    <p>当前选中的日期: {{ selectedDate }}</p>
  </div>
</template>

<script>
import CustomDatePicker from './CustomDatePicker.vue';

export default {
  name: 'App',
  components: {
    CustomDatePicker,
  },
  data() {
    return {
      selectedDate: '',
    };
  },
};
</script>

在该页面中，引入并使用了CustomDatePicker组件，并通过v-model将选中的日期绑定到selectedDate变量中。最终，在页面上显示当前选中的日期。