【Vue.js】propsオプションを利用して親コンポーネントから子コンポーネントへデータを渡す
前回の記事で使った例をベースに、子コンポーネント Favorites.vue
を追加して、親コンポーネントからデータを渡してみる。
親コンポーネント 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
要素が動的に増えるような形だ。
こんな感じで、子コンポーネント同士のデータ受け渡しもできる。