Vue.js #004 – 親→子にデータを渡す

親→子にデータを渡すメモ。

src/views/Home.vue

<template>
    <div class="home">
        <Button v-bind:name-id='nameIdData'/>
    </div>
</template>

<script>
    import Button from '@/components/Button.vue';

    export default {
        name: 'home',
        components: {
            Button
        },
        data() {
            return {
                nameIdData: 'sampleData'
            }
        }
    }
</script>

src/components/Button.vue

<template>
    <div class="button">
        <!--ボタン-->
        <button type="button" class="btn btn-primary">{{ nameId }}</button>
    </div>
</template>

<script>
    export default {
        name: 'Button',
        props: {
            nameId: String
        }
    }
</script>

<style scoped>

</style>

親を「v-bind:name-id=‘nameIdData’」、子をpropsで取得し「nameId」で表示

• 参考文献
  Vue.js
  Vue CLI 3