computed

computedの学習
- 「他のデータに基づいて自動計算される値」

<script setup lang="ts">
import { ref, computed } from "vue"

const count = ref<number>(0)

const doubleCount = computed(() => count.value * 2)
const tripleCount = computed(() => count.value * 3)

doubleCount, tripleCountは countの値が変化したら、どちらの値も同じように追跡して変化してくれる

Props

1つのデータを複数のコンポーネントで共有
再利用可能なコンポーネントを作成

使い方

小ファイルの方で作成すること

型定義 interfaceを利用する

props受け取り宣言する

const props = defindProps<interface型>()

親ファイルでコンポーネント宣言する際に利用する

<template>
    <div>
        <!-- 同じ商品カードコンポーネントに引数として入力 -->
        <VisualPropsDemo 
            productName="Vue.js入門書" 
            :price="2800" 
            category="プログラミング書籍"
        />

        <VisualPropsDemo 
            productName="TypeScript完全ガイド" 
            :price="3200" 
            category="技術書"
        />

        <VisualPropsDemo 
            productName="ワイヤレスマウス" 
            :price="1500" 
            category="PC周辺機器"
        />
    </div>
</template>

<script setup lang="ts">
import VisualPropsDemo from './step6-child.vue'
</script>

必要な背景

ユーザー情報を複数の場所で表示したい
同じ形式のカードを複数作りたい
データの重複を避けたい

スコピーー

学習履歴詳細

TypeScript学習

computed

Props

使い方

必要な背景