動態渲染之vue頁面向元件間傳值

== Vue頁面檔案==
//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("直線面積圖");
}

== 元件檔案==
// 接收並使用賦值
   let viewcode = defineProps(["celiangMethod"])
// 加入深度監聽;固定格式
  watch(viewcode,(val)=>{
      //業務邏輯程式碼
    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
  }