vue3接收组件传值并用watch监听，监听到变化后执行函数

watch没有触发的原因是：

父组件传的变量要用ref创建一个响应式的变量，这样，传给子组件的是变化的值，子组件接收用toRefs保持响应式，用watch监听，这样就能触发，成功监听到变化。

1、父组件代码

父组件中的子组件标签上传递变量

   <Statistics title="近期测评统计" :startTime="startTime" :endTime="endTime"/>

const startTime = ref(null);

const endTime = ref(null);

function timeChange(val) {

    startTime.value = val[0];

    endTime.value = val[1];

....其余代码

}

2、Statistics 子组件接收 并watch监听

import {defineProps ,watch,toRefs } from "vue";

const props = defineProps({

  startTime:String,

  endTime:String,

})

const {startTime,endTime}=toRefs(props)

 

// 监控 startTime 和 endTime 的变化

watch([startTime,endTime], () => {

  getLineData();

});