vue3で親子間のデータ連携を行う方法

親コンポーネントから子コンポーネントに値を受け渡す方法は、Vue.jsでよく使用される重要な機能です。

初心者の方にとっては、この機能の使い方やなぜ必要なのか理解するのが難しいと思います。（私も何度もつまづきました笑）

この記事で、Vue3での値の受け渡しについて、具体的な解説と例を使って理解を深めていきましょう。

値の受け渡しを行う方法が分かれば、より柔軟な開発ができるようになります！がんばりましょう！

私は何者か

大学時代の研究や趣味で、vue3を用いてアプリを開発しています。
なんやかんや、2年半触れています！

私についての詳細はこちら！

結論「”props”を使う」
コードで書くとどうなる？
まとめ

結論「”props”を使う」

やり方は他にもありますが、今回は「props」を用いた方法を説明します。

propsは子コンポーネントのプロパティであり、子コンポーネントが親コンポーネントから渡された値を受け取るためのパラメータです。

結論を言うと、以下の2つが必要です。

①親コンポーネントで子コンポーネントに渡す値は、子コンポーネントのタグに属性として指定する
②子コンポーネントはpropsオプションを使用して受け取る値の名前を指定する

図解すると以下のようになります。

親から子に引き渡すときは、親だけ書けばいい訳ではありません。
「親が送り、子が受け取る」という関係なので、両方のコンポーネントに書く必要があります！

コードで書くとどうなる？

具体的なコードを見てみましょう。

以下が親のコンポーネントです。
ChildComponentが子のコンポーネントで、「message」という属性を追加しています。

<!-- 親コンポーネント -->
<template>
<div>
<ChildComponent :message="parentMessage" /> //子コンポーネントのタグに属性として指定
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: '親からのメッセージ',
};
},
};
</script>

以下が子ポーネントです。

子コンポーネントでは、propsオプションで受け取る値の名前を指定し、その値をテンプレート内で利用することができます。

ここで言うと、親で指定した「message」属性を子のpropsオプションの名前として受け取っていますね。

messageが変数となり、使えるようになります。
（変数なので、templateでもscript内にも書き込めます。）

<!-- 子コンポーネント -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
props: ['message'], //propsオプションで受け取る値の名前を指定
};
</script>