Vue3 の define 関数

📢 この記事は gemini-3-flash-preview によって翻訳されました

Options API のオプションを定義する

Vue 3.3 で defineOptions() っていうマクロ関数が追加されたんだ。これを使えば、props、emits、expose、slots 以外の Options API のオプションを定義できるよ（これらには専用の define 関数があるからね）。

1
2
3
4
5
6
<script setup>
defineOptions({
    name: 'LoginIndex',
    // ...
})
</script>

name の役割：

デバッグが楽になる - 開発者ツールのコンポーネントツリーに name の値が表示されるよ。
再帰コンポーネント - コンポーネント内で自分自身を呼び出すときに、この name の値が使えるんだ。
<keep-alive> のキャッシュ - name を使って、キャッシュするかどうかを判断できるよ。

親子コンポーネント間のデータ双方向バインディング

今までは、双方向バインディングを実装するのはちょっと面倒だったんだよね。

親コンポーネント側：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script setup>
import { ref } from 'vue';
import inputCom from './components/input-com.vue';

const msg = ref("a msg from father")
</script>

<template>
    <inputCom v-model="msg"></inputCom>
    <div>{{ msg }}</div>
</template>

子コンポーネント側：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script setup>
defineProps({
    modelValue: String
})

const emit = defineEmits(['update:modelValue'])
</script>

<template>
    <div>
        <input
          type="text"
          :value="modelValue"
          @input="e => emit('update:modelValue', e.target.value)"></input>
    </div>
</template>

でも、defineModel() 関数を使えばもっと簡単に書けるようになるんだ。子コンポーネントはこんな風に書けるよ：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script setup>
const modelValue = defineModel()
</script>

<template>
    <div>
          <input
          type="text"
          :value="modelValue"
          @input="e => modelValue = e.target.value"></input>
    </div>
</template>