[Vue] script setup の使い方

Vue3では、<script setup>タグを使用して、コンポーネントのセットアップコードを定義します。このタグは、通常のJavaScriptコードを書くことができますが、Vueのコンポーネントオプションも使用することができます。つまり、Vue2のOptions APIの代わりに、よりシンプルで明確なAPIを提供するものです。

<script setup>タグの利点は、以下の通りです。

• コードがシンプルで読みやすくなる
• コンポーネントのセットアップコードが分かりやすくなる
• Vueのコンポーネントオプションの使用が簡単になる

以下は、 script setupタグの使い方の例です。

基本構文

<script setup>
const message = 'Hello, Vue World!'
</script>

<template>
    <div>
        {{ message }}
    </div>
</template>

<script setup>タグ内には、通常のJavaScriptコードが書かれます。変数や関数を宣言し、それらをテンプレート内で使用することができます。

プロパティの受け取り

Vue3では、プロパティの受け取りに propsオプションを使用することができます。以下は、<script setup>タグ内でpropsを使用する例です。

<script setup>
  props: {
    message: String
  }
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>タグ内に propsオプションを定義することで、プロパティを受け取ることができます。上記の例では、messageプロパティをString型で受け取っています。

Vueのコンポーネントオプションの使用

Vue3では、<script setup>タグ内でVueのコンポーネントオプションを使用することができます。以下は、computedを使用する例です。

<script setup>
  import { computed } from 'vue'
  
  let message = 'Hello, Vue3!'
  
  const reversedMessage = computed(() => message.split('').reverse().join(''))
</script>

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

上記の例では、computed関数を使用して、messageプロパティを反転させた値を計算しています。そして、reversedMessage変数を公開することで、テンプレートで使用できるようにしています。

defineEmits()関数

Vue3では、<script setup>タグ内でdefineEmits()関数を使用することで、イベントを定義できます。以下は、defineEmits()関数を使用する例です。

<script setup>
import { defineEmits,reactive } from 'vue'

const emits = defineEmits(['click'])

const buttontext = reactive({
    text:'Click Me!',
})

const handleClick = () => {
    console.log('click')
    buttontext.text = 'Clicked!'
    emits('click')
}
</script>

<template>
    <button @click="handleClick()">{{ buttontext.text }}</button>
</template>

まとめ

Vue3の<script setup>タグは、よりシンプルで明確なAPIを提供することで、コンポーネントのセットアップコードを簡素化することを目的としています。<script setup>タグでは、Vueのコンポーネントオプションを使用することができますので、公式サイトも参考にして、<script setup>を使ってみましょう。