Vue.jsでコンポーネント親子間の値の受け渡し

親→子（データ）

親

• 子のコンポーネントを読み込みテンプレートで配置
• message="渡したいデータを代入"

parent.vue

<template>
    <div>
        <child message="Hello Vue!!"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    }
}
</script>

子

• propsに「message」を設定

child.vue

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
<script>
export default {
    props: ['message']
}
</script>

親→子（変数）

• dataに変数を設定
• :message=messageで変数を渡す

parent.vue

<template>
    <div>
        <child :message="message"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    },
    data() {
        return {
            message: 'Hello Vue!!'
        }
    }
}
</script>

子→親（変数）

• this.$parentでアクセス

child.vue

<script>
export default {
    created: function () {
        this.$parent.message = 'child!!!';
    }
}
</script>

子→親（メソッド）

• v-on:panretMessage="messageLog"

parent.vue

<template>
    <div>
        <child v-on:panretMessage="messageLog"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    },
    methods: {
        messageLog() {
            console.log("parent");
        }
    }
}
</script>

• $emit('panretMessage')

child.vue

<template>
    <div>
        <button @click="$emit('panretMessage')">message</button>
    </div>
</template>

メソッドに引数を渡す

parent.vue

export default {
    components: {
        Child
    },
    methods: {
        messageLog(message) {
            console.log(message);
        
    }
}

• $emit('panretMessage', '親に送るメッセージ')

child.vue

<template>
    <div>
        <button @click="$emit('panretMessage', '親に送るメッセージ')">message</button>
    </div>
</template>