<script lang="ts">
  import { defineProps } from "vue";
  
  const props = defineProps<{
    article: {
      title: string;
      wordCount: number;
      date: string;
      readingTime: string;
      id: number;
    };
  }>();
// 解析父属性props
const { article } = props;
</script>

<template>
  <div @click="goToNewBlogPage(article.id)">
    <div>
      <h2>{{ article.title }}</h2>
      <div>
        <span>{{ article.date }}</span>
        <span>{{ article.wordCount }}</span>
        <span>{{ article.readingTime }}</span>
      </div>
    </div>
  </div>
</template>

<template>
	<PostTitle v-for="article in articles" :key="article.id" :article="article" />
</template>

<script>
import PostTitle from "../components/PostTitle.vue"
</script>