vue3中页面向组件间传值，watch监听；随时响应

== Vue页面文件==
//vue文件引入组件

import { onMounted, reactive, ref,watch  } from "vue";

import celiangjuli from "@/components/Map/celiangjuli.vue";
//使用组件 key：celiangMethod（任意名）
<celiangjuli  :celiangMethod="celiangMethod" ></celiangjuli>
//
// 定义初始化value
let celiangMethod = ref();
// 对变化的value进行监听
watch(celiangMethod,()=>{
    console.log(1);
    
})

//不同的方法对value进行赋值
function julimap(){
  
  showguiji.value = 4;
  celiangMethod.value = 1;
  console.log("直线面积图");
}

== 组件文件==
//组件导入的类

import { shallowRef, onMounted, popScopeId, ref,watch,defineProps} from 'vue';

// 接收并使用赋值
   let viewcode = defineProps(["celiangMethod"])
// 加入深度监听;固定格式
  watch(viewcode,(val)=>{
　　// val就是vue页面和组件之间交互的值
      //业务逻辑代码
    if(val.celiangMethod==1){
      draw('rule') 
    }if(val.celiangMethod==2){
      draw('measureArea')
    }if(val.celiangMethod==3){/* 画圆 */
      draw('circle')
    }if(val.celiangMethod==4){/* 画矩形 */
      draw('rectangle')
    }
      //业务逻辑代码
  },
  {
    deep:true,
  },
  {
    immediate:true
  }