Vue3で単一ファイルコンポーネントにpropsで値を受け渡す方法

2021年05月23日

Vue3で、単一ファイルコンポーネントにpropsで値を受け渡す方法についてのメモです。

親コンポーネント側の記述

下記では、Controllerから埋め込んだidという変数を、子コンポーネントのTestComponentに渡しています。

<div id="app">
    <test id="{{ $id }}"></test>
</div>

子Component側の記述

子Component側が、受け渡された値を使用するには、propsで名前を指定する必要があります。

<template>
    <div>親コンポーネントから渡された値：{{ id }}</div>
</template>

<script>
    module.exports = {
        props: ['id'],
        data() {
            return {
                ''
            }
        },
    }
</script>