dayjournal memo

Total 974 articles!!

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

Yasunori Kirimoto's avatar

画像



親→子に値を渡すメモ。



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」で表示

画像



book

Q&A