Vue3 하위컴포넌트로 데이터 전달

1. 컴포넌트 구조 : PostList > PostItem
2. PostList.vue

<template>
  <q-list bordered separator>
    <PostItem
      v-for="item in items"
      :key="item.id"
      :item="item"
      :escapeHTML="escapeHTML"
    />
  </q-list>
</template>

<script setup>
import PostItem from './PostItem.vue';
...
...
</script>

<style lang="scss" scoped></style>

PostItem에 :item=item으로 데이터 바인딩
3. PostItem.vue

<template>
...
...
 <div class="col-2">
          <div class="flex flex-center items-center">
            <PostIcon
              name="sym_o_sms"
              :label="item.comments_count"
              tooltip="댓글수"
            />
          </div>
        </div>
...
...
</template>
<script setup>
...
...
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  escapeHTML: {
    type: Boolean,
    default: false,
  },
});
...
...
</script>

item으로 넘어오는 데이터를 defineProps로 정의한다. 여기서 item은 object이므로 템플릿에 접근할때는 item.comments_count, script에서는 proprs.item.comments_count로 접근한다.