使用vue3编写一个简单的日期选择组件，并写出引入组件的方式

在Vue 3中，我们可以使用Element Plus库中的`<el-date-picker>`组件来创建一个简单的日期选择组件。Element Plus是一个基于Vue 3的UI库，提供丰富的组件和易于使用的API。

首先，你需要安装Element Plus，如果你还没有安装，可以使用npm或yarn命令：

# 如果你使用npm
npm install element-plus

# 或者使用yarn
yarn add element-plus

然后，在你的项目中创建一个日期选择组件文件，例如`DateSelect.vue`:

<template>
  <div>
    <el-date-picker v-model="selectedDate" placeholder="选择日期"></el-date-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElDatePicker } from 'element-plus';

const selectedDate = ref(new Date()); // 存储用户选择的日期

// 如果你想显示特定格式的日期，可以在picker-options里设置
const pickerOptions = {
  format: 'yyyy-MM-dd'
};

function handleDateChange(date) {
  selectedDate.value = date;
}

ElDatePicker({
  value: selectedDate,
  placeholder: '选择日期',
  onPick: handleDateChange,
  ...pickerOptions
});
</script>

<style scoped></style>

在父组件中引入并使用这个组件：

<!-- 父组件模板 -->
<template>
  <DateSelect />
</template>

<script>
import DateSelect from '@/components/DateSelect.vue'; // 路径根据实际情况调整

export default {
  components: {
    DateSelect
  }
};
</script>

这样就创建了一个基本的日期选择组件，并通过`v-model`绑定到父组件的数据，当用户选择日期时，`handleDateChange`函数会被触发更新`selectedDate`变量。