ホーム > Vue | 技術系 > Vue3で単一ファイルコンポーネントにpropsで値を受け渡す方法

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

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>

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
https://www.itblog.jp/wp-trackback.php?p=10004
トラックバックの送信元リスト
Vue3で単一ファイルコンポーネントにpropsで値を受け渡す方法 - ITblog より

ホーム > Vue | 技術系 > Vue3で単一ファイルコンポーネントにpropsで値を受け渡す方法

フィード

ページの上部に戻る