vue3에서 script setup 사용 시 - vuejs

props, emit, computed, watch, onBeforeMount 등 사용법

---

vuejs (computed, watch, onBeforeMount)

import { ref, computed, watch, onBeforeMount } from "vue";
import { useRoute } from "vue-router";

// image 경로는 이런식으로
const img_xbtn = new URL("@/assets/images/close.svg", import.meta.url).href;

const route = useRoute()

// ## computed 관련
const info = ref({
  ...
  showNo: computed(() => {
    return (no) => {
      return no + ...
    }
  })
})

// 위와 같이 하거나 아래처럼
const info2 = computed(() => {
  return (member.value.map((member) => {
    return {
      no: member?.no ? member.no : "1",
      ...
    }
  })
})
// // ## computed 관련

onBeforeMount(() => {
  // onBeforeMount 관련 코드
})

watch(route, (value) => {
  // watch 관련 코드// value?.query?.no
})

vuejs (props, emit - component 사용시)

<template>
  <transition name="fade">
    <div class="lpop_bg" v-if="showpop">
      <div class="lpop_box confirm">
        <p class="title">{{ title }}</p>
        <div class="btn_box">
          <button class="btn_confirm" @click="evtCancel" v-if="evtno === 2">취소</button>
          <button class="btn_confirm ok" @click="evtClick">확인</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    defatult: ""
  },
  showpop: {
    type: Boolean,
    default: false
  },
  evtno: {
    type: Number,
    default: 1
  }
})

// "확인, 취소" 클릭이벤트 부모 컴포넌트에 보내기
const emit = defineEmits(["evClick", "evCancel"]);
const evtClick = () => {
  emit("evClick");
}
const evtCancel = () => {
  emit("evCancel");
}
</script>
<!--
  // 부모 컴포넌트에서 사용 시
  # showpop : (boolean) 레이어 팝업 보이기 여부
  # title : (string) 확인 문구
  # evtno : (Number) 1 - 확인 이벤트[default],   2 - 취소 이벤트(필요 시)
  @ evClick : 확인 이벤트 - click
  @ evCancel : 취소 이벤트 - click.  evtno="2" 일 때 보여짐

  <Checkpopup :showpop="" :title="" @evClick="" @evCancel="" />
  <Checkpopup :showpop="" :title="" evtno="2" @evClick="" @evCancel="" />
 -->

컴포넌트 사용

<Checkpopup
        :showpop="info.show"
        :title="info.title"
        :evtno="2"
        @evCancel="fc1"
        @evClick="fc2(true, 'ok')" />

const fc1 = () => {
  // 취소 버튼 클릭 시 실행되는 부분
}

const fc2 = (boolean, txt) => {
  // 확인 버튼 클릭 시 실행되는 부분
  // console.log(boolean, txt);
}

<script setup> 스크립트를 작성할 때는 이런 형태로 사용하면 된다.

끝.