親コンポーネントで取得した情報を子コンポーネントに渡す方法

はじめに

この記事は文系エンジニアが書いた記事になりますの、わかりにくい箇所少し間違った箇所などあるかもしれません。
あくまでご参考までに☺︎
つよつよエンジニアの方は意見とかお願いします☺︎

この記事で説明すること

この記事では親コンポーネントで、手に入れた情報をどのようにして子コンポーネントで受け取ることができるのか
なるべく分かりやーすく説明します☺︎

本題

oya.vue(親コンポーネント)

<template>
　　　　　<kodomo aiueo="あいうえお"></kodomo>  // kodomo.vueを表示
</template>

<script>
import kodomo from './kodomo'     // kodomo.vueファイルを読み込む

export default {
    components: {
        kodomo　      // <kodomo>を使えるようにする
    }
}
</script>

kodomo.vue(子供コンポーネント)

<template>
  <p>{{ aiueo }}</p>　　　　　　　　　　　　　// oya.vue(親コンポーネント)から受け取った「あいうえお」が表示される
</template>

<script>
export default {
    props: ['aiueo']　　　　　　　　　　　　// oya.vue(親コンポーネント)から受け取る
}
</script>

このようにして親から子へ情報が受け渡されます☺︎

まとめ

今回は、親コンポーネントで、手に入れた情報をどのようにして子コンポーネントで受け取ることができるのかについて説明しました。
手を動かして簡単なところから進めていきましょう