【Vue.js】propsオプションを利用して親コンポーネントから子コンポーネントへデータを渡す

前回の記事で使った例をベースに、子コンポーネント Favorites.vue を追加して、親コンポーネントからデータを渡してみる。

tomcky.hatenadiary.jp

親コンポーネント App.vue はこんな感じにする。

<template>
  <div id="app">
    <Posts @fav="addToFavorite"/>
    <!-- 親コンポーネントのデータfavoritesをv-bindで動的にバインディングする -->
    <Favorites :favorites="favorites"/>
  </div>
</template>

<script>
import Favorites from './components/Favorites.vue'

export default {
  name: 'app',
  components: {
    Favorites
  },
  data: function () {
    return {
      'favorites': []
    }
  },
  methods: {
    addToFavorite: function(postTitle) {
      this.favorites.push(postTitle);
    }
  }
}
</script>

<Favorites :favorites="favorites"/> で子コンポーネントに親コンポーネントのデータ favorites を渡す。
ここでは v-bind を使うことで動的にデータを渡しており、これで、親コンポーネントの favorites が更新されるたびに子コンポーネントへデータが流れるようになる。

追加した子コンポーネント Favorites.vue がこちら。

<template>
  <ul>
    <li v-for="(favorite, index) in favorites" :key="index">
      {{ favorite }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Favorites',
  // propsを使ってバインディングで指定したプロパティを用意する
  props: {
    favorites: Array
  }
}
</script>

props: { favorites: Array } で親コンポーネントでのバインディングで指定したプロパティを用意しておく。
Array 指定はプロパティ検証と呼ばれる機能を使っており、データがこれを満たさない場合には警告を出すようにしている。

これで親コンポーネントから子コンポーネントへのデータ渡しが実現できた。

ちなみに、前回と今回の例を合わせたことで、Posts.vue から Favorites.vue の、子コンポーネント同士のデータ渡しが、親コンポーネントを経由することで間接的に実現できていることがわかる。

Posts.vue で表示している li 要素をクリックすることで Favorites.vue の li 要素が動的に増えるような形だ。

こんな感じで、子コンポーネント同士のデータ受け渡しもできる。