[Vue3&TypeScript] Props, Emits 사용 방법 예제 코드

Props 사용을 위해 부모페이지에서 Monitor.vue를 호출

  <template v-else>
    <div class="space-y-[30px]">
      <Monitor title="Web" badge="normal" action-type="web"/>
      <Monitor title="API" badge="warn" action-type="api"/>
    </div>
    <Monitor v-model:is-open="dataPopup" />
  </template>

const dataPopup= ref(false);

Monitor.vue

<template>
  <div class="border-container flex p-[30px] bg-white">
    <div class="w-[290px]">
      <div class="flex items-center gap-2.5 mb-2.5">
        <span class="text-[17px] font-medium">{{ props.title }}</span>

        <span v-if="props.badge === 'normal'" class="count-badge green">정상</span>
        <span v-else-if="props.badge === 'warn'" class="count-badge red">경고</span>
        <span v-else class="count-badge error">통신장애</span>
      </div>
      <p class="text-[#777777] text-sm">10시 01분 01초</p>
    </div>

    <div class="grid gap-2.5 flex-1" :class="[serverCnt >= 3 ? 'grid-cols-3' : 'grid-cols-2']">
      <div
        v-for="(item, index) in serverCnt"
        :key="index"
        class="border-container py-[17.5px] px-5 grid grid-cols-3 relative"
      >
        <p class="chart-title">{{props.title}}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  import { useStore } from '@/stores/dashboard/MonitorData';

  const store = useMonitorStore();
  const { getMontorList } = store;

  interface Props {
    title: string;
    actionType: string;
    badge: 'normal' | 'warn' | 'error';
  }

  interface Emits {
     (e: 'update:isOpen', value: boolean): void;
  }

  const props = defineProps<Props>();
  const emits = defineEmits<Emits>();

  const closePopup = () => {
     emits('update:isOpen', false);
  };

  const serverCnt = ref<number>(0);

  onMounted( async () => {

    store.searchParams.actionType = props.actionType;

    await getMontorList();
    await nextTick();

    console.log(store.getList);

    serverCnt.value = store.getList.filter(item => item.host).length;

  });

  onUnmounted(() => {
  });
</script>


<style lang="postcss" scoped>
  .chart-title {
    @apply absolute top-[17.5px] left-[20px] text-[17px] font-medium z-50;

    &::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
      vertical-align: -3px;
    }
  }
</style>