Zenn
Open2

Reactユーザー目線でのVue学習めも

Vue.js
Vue 3
じょうげんじょうげん

ファイル構成

  • ファイルを分けて書くやり方
    .js/ts, .html, .cssで別々に書く方法

  • 単一ファイルコンポーネント
    .vue という拡張子を使用することでSFC(Single File Component) にすることができる。
    <script />
    <template />
    <style />
    これらを1つのファイル内に定義することでわざわざ見に行くことなく書ける
    特に、<style scoped />とするとそのコンポーネント内だけで有効になるのでCSSフレームワークを入れなくても割と書けそうなのは良い。

構文

Options APIとComposition APIの2つの書き方が存在

  • Options API
    Vue2からある書き方で、決められた名前の関数が定義されたオブジェクトをexport defaultする。
  • Composition API
    Composable関数(React hooksみたいなやつ)をインポートして使うことで、決められた関数名とかを使わずに好きなように書けるやつ。
    <script setup />とすることで、setup()関数をExportすることなく定義された関数を暗黙的に<template />内で使用することができる
じょうげんじょうげん
  • TypeScript
  • Vue3
  • Composition API with script setup
    この組み合わせで書くのが正解なのは間違いないはずなのに、普通のコンポーネントの書き方が調べても全然出てこないので書き記しておく。

v-から始まるコンポーネントはVuetifyのコンポーネントです

子コンポーネント側

Sheet.vue
<script setup lang="ts">
import { StyleValue } from 'vue';

type Props = {
  title: string;
  description: string;
  btnText: string;
  btnStyle:StyleValue;
  onClick: () => void;
}

const { title, description, btnText, btnStyle="color:blue", onClick:handleClick } = defineProps<Props>();
</script>

<template>
  <v-sheet>
    <v-card>
      <v-card-title>{{ title }}</v-card-title>
      <v-card-text>{{ description }}</v-card-text>
      <v-card-actions>
        <v-btn :style="btnStyle" @click="handleClick">{{ btnText }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-sheet>
</template>

呼び出し側

index.vue
<script lang="ts" setup>
import Sheet from '@/components/Sheet.vue';

  const componentProps:InstanceType<typeof Sheet>['$props']  = {
    title: 'Hello World',
    description: 'Welcome to your new Vite + Vue 3 + Vuetify 3 project!',
    btnText: 'Click Me',
    btnStyle: 'color: red',
    onClick: () => {
      console.log('Hello World');
    }
  }
</script>

<template>
  <Sheet :="componentProps" />
</template>

Reactで当たり前のようにやっていることがなぜか検索しても全然出てこなくて本当に困った。
特に、ComponentProps<T>に相当するやつ。
これとかまともにコンポーネント書こうと思ったら必須なのに。
簡潔に渡せないからユーティリティ型にしておいても良いかもしれない。

type ComponentProps<T> = InstanceType<T>['$props']

やっとコンポーネントが書けるようになった。