Vue.js #003 – 親→子に値を渡す

親→子に値を渡すメモ。

src/views/Home.vue

<template>
    <div class="home">
        <Button name-id='sample'/>
    </div>
</template>

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

    export default {
        name: 'home',
        components: {
            Button
        }
    }
</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>

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

• 参考文献
  Vue.js
  Vue CLI 3