Nuxt.jsで子コンポーネントにデータを引き継ぐ

ページ内で使用している値を子コンポーネントに渡す方法をメモ。

サンプルコード

まずコンポーネントに分ける前の状態を試してみます。
pagesディレクトリ内にindex.vueというファイルを作成して、以下のような内容にします。

<template>
  <div class="p-article-list">
    <article class="p-article-item" v-for="article of articles" :key="article.id">
      <NuxtLink class="p-article-item__link" v-bind:to="'/article/' + article.id + '/'">
        <div class="p-article-item__date">{{ article.date }}</div>
        <p class="p-article-item__ttl">{{ article.title }}</p>
      </NuxtLink>
    </article>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
          "id": "0003",
          "date": "2021/07/10",
          "title": "記事C",
          "body": "記事Cの本文です。"
        },
        {
          "id": "0002",
          "date": "2021/07/10",
          "title": "記事B",
          "body": "記事Bの本文です。"
        },
        {
          "id": "0001",
          "date": "2021/07/10",
          "title": "記事A",
          "body": "記事Aの本文です。"
        }
      ]
    }
  }
}
</script>

<style>
.p-article-list {
  margin-bottom: 50px; 
}
.p-article-item {
  border-bottom: #cccccc 1px solid;
  padding: 15px;
}
.p-article-item__link {
  color: #333333;
  text-decoration: none;
}
.p-article-item__date {
  font-size: 14px;
}
.p-article-item__ttl {
  margin: 0;
  font-size: 16px;
}
</style>

配列のデータを一覧として表示しています。
この記事部分(articleタグ部分)をコンポーネントとして分けてみます。

まずnuxt.config.jsに下記を追加します。

export default {
  components: true
}

次にcomponentsディレクトリ内にArticleItem.vueというファイルを作成して、以下のような内容にします。

<template>
  <article class="p-article-item">
    <NuxtLink class="p-article-item__link" v-bind:to="'/article/' + article.id + '/'">
      <div class="p-article-item__date">{{ article.date }}</div>
      <p class="p-article-item__ttl">{{ article.title }}</p>
    </NuxtLink>
  </article>
</template>

<script>
export default {
  props: ['article']
}
</script>

<style>
.p-article-item {
  border-bottom: #cccccc 1px solid;
  padding: 15px;
}
.p-article-item__link {
  color: #333333;
  text-decoration: none;
}
.p-article-item__date {
  font-size: 14px;
}
.p-article-item__ttl {
  margin: 0;
  font-size: 16px;
}
</style>

templete内はほぼそのままで、styleもarticleタグ内で使用している部分を持ってきています。
12行目が親からのデータを受け取る部分です。

pages/index.vueを以下のように変更します。

<template>
  <div class="p-article-list">
    <ArticleItem v-for="article of articles" :article="article" :key="article.id" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
          "id": "0003",
          "date": "2021/07/10",
          "title": "記事C",
          "body": "記事Cの本文です。"
        },
        {
          "id": "0002",
          "date": "2021/07/10",
          "title": "記事B",
          "body": "記事Bの本文です。"
        },
        {
          "id": "0001",
          "date": "2021/07/10",
          "title": "記事A",
          "body": "記事Aの本文です。"
        }
      ]
    }
  }
}
</script>

<style>
.p-article-list {
  margin-bottom: 50px; 
}
</style>

scriptは変更なしで、styleはArticleItem.vueに移行した部分を削除しています。
3行目がコンポーネント(ArticleItem.vue)を指定している部分で、「:article=”article”」とすることで指定したコンポーネントにarticleのデータを渡しています。