vue3+ts怎么切换日历日期就动态渲染对应的数据

在 Vue3 + TypeScript 中，实现切换日历日期动态渲染对应数据可以使用 Vue3 的 Composition API 和 TypeScript 的类型检查功能。

具体实现步骤如下：

1. 创建一个日历组件，通过 props 属性传递选中的日期，同时定义一个 data 属性用于存储获取到的数据。

<template>
  <div>
    <calendar :selectedDate="selectedDate" @change="handleChange" />
    <div v-for="item in data" :key="item.id">{{ item.title }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { getSomeData } from '@/api';

export default defineComponent({
  name: 'CalendarDemo',
  props: {
    selectedDate: {
      type: Date,
      required: true,
    },
  },
  setup(props) {
    const data = ref([]);

    const handleChange = async (date: Date) => {
      const res = await getSomeData(date);
      data.value = res.data;
    };

    return {
      data,
      handleChange,
    };
  },
});
</script>

2. 在日历组件中，当用户选择日期时，触发 change 事件，并将选中的日期作为参数传递给事件处理函数。

<template>
  <div>
    <input type="date" v-model="date" @change="handleChange" />
  </div>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue';

export default defineComponent({
  name: 'Calendar',
  props: {
    selectedDate: {
      type: Date,
      required: true,
    },
  },
  setup(props, { emit }) {
    const date = ref(props.selectedDate.toISOString().slice(0, 10));

    watch(
      () => props.selectedDate,
      (val) => {
        date.value = val.toISOString().slice(0, 10);
      },
    );

    const handleChange = () => {
      const selectedDate = new Date(date.value);
      emit('change', selectedDate);
    };

    return {
      date,
      handleChange,
    };
  },
});
</script>

3. 在事件处理函数中，调用后端 API 获取对应日期的数据，并更新 data 属性的值。

const handleChange = async (date: Date) => {
  const res = await getSomeData(date);
  data.value = res.data;
};

4. 在组件中使用 ref 和 reactive 来定义响应式数据，使用 watch 来监听 props 或响应式数据的变化，并在变化时执行相应的操作。

const data = ref([]);

watch(
  () => props.selectedDate,
  (val) => {
    fetchData(val);
  },
);

const fetchData = async (date: Date) => {
  const res = await getSomeData(date);
  data.value = res.data;
};

以上是 Vue3 + TypeScript 实现切换日历日期动态渲染对应数据的示例代码，具体实现方式可能因为业务需求而有所不同。