【Vue.js】親コンポーネントから子コンポーネントにデータを渡す手順

はじめに

今回は親コンポーネントから子コンポーネントにデータを渡す手順についての記事になります！

イメージはこんな感じ。

f:id:hanaaaaaachiru:20191113160949p:plain

今回も細かいところは書かずに、おおまかな実装手順を書いていきたいと思います。

はじめに
実装①「属性で渡す」
- parent.vue
実装②「propで受け取る」
- child.vue
実装③「データバインディングする」
- parent.vue
さいごに

実装①「属性で渡す」

先程の図にもある通り、まずは親コンポーネント側から属性を渡します。

parent.vue

<template>
    <!-- childタグの属程(プロパティ)としてデータを渡す -->
    <child val="データをここで送る"></child>
</template>

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

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

実装②「propで受け取る」

親コンポーネント側の実装が終わったので、子コンポーネントで受け取るためのコードを書けば完成です。

child.vue

<template>
    <div>
        <!-- valを描画する -->
        <h1>{{ val }}</h1>
    </div>
</template>

<script>
export default {
    // 親コンポーネントからデータを受け取る
    props: ["val"]
}
</script>

f:id:hanaaaaaachiru:20191117160055p:plain

実装③「データバインディングする」

先程の場合は文字列を直接送っていましたが、あまりこういった使い方はしないかと思います。やはり親の持つ変数を送るのがメインだと思うので、そちらのやり方もみておきましょう。

といったもやり方はとても簡単で、v-bind:（省略形は:）を付けるだけでOKです。

parent.vue

<template>
    <!-- 「v-bind:」を付け足すことでmessageを渡す -->
    <child v-bind:val="message"></child>
</template>

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

export default {
    // データを定義する
    data: function(){
        return {
            message: "このデータを送るよ"
        }
    },
    // <child>を使えるようにする
    components: {
        child
    }
}
</script>