Vue3处理父子组件defineProps未定义问题

今天编写Vue3前端时，当子组件接收来自父组件的数据时，遇到了defineProps未定义问题

先展示一下父、子组件的部分代码

<!-- 父组件代码 -->
<template>
    <div class="Button">
        <el-button @click = "regionalMode" :disabled = "!value2" color="#626aef" >区域模式</el-button>
        <el-button @click = "pathMode" :disabled = "!value1" color="#626aef" >路径模式</el-button>
        <el-button @click = "resetMode" color="#626aef"  :disabled = "value3">重置模式</el-button>
        <el-button @click = "resetMap" color="#626aef" >重选地图</el-button>
    </div>
    <BaiduMap :state = "state" :mode = "mode"/>
</template>

<script setup>
  import BaiduMap from './components/BaiduMap.vue'
  import { ref } from 'vue'

  let mode = ref('')
  function regionalMode(){
    //给子组件map发送信息
    mode.value = 'region'
  }
  function pathMode(){
    mode.value = 'path'
  }
  let state = ref(true)
  function determineMap(){
    state.value = false
  }
  function resetMap(){
    state.value = true
  }
</script>

<!-- 子组件代码 -->
<template>
    <baidu-map class="bm-view" 
        :scroll-wheel-zoom="state" 
        :dragging="state" 
        :double-click-zoom="state" :mode = "mode">
    </baidu-map>
</template>
<script setup>
import { ref, watch, defineProps, toRefs } from 'vue'

let { state,mode } = toRefs(defineProps(['state','mode']))
watch(mode, (newValue) => {
    if(newValue === 'region') console.log('mode', newValue)
    if(newValue === 'path') console.log('mode', newValue)
})
</script>

简单来说，就是父组件给子组件两个参数state和mode，子组件接收参数后进行下一步数据处理。

但是上述代码运行会报错，说defineProps未定义，如下

解决方法非常简单，就是分开写，把下面这行代码

let { state,mode } = toRefs(defineProps(['state','mode']))

修改为

let props = defineProps(['state','mode'])
let { state,mode } = toRefs(props) 

完美运行，且子组件拿到的是响应式数据