自作でフォーム系のコンポーネントを作るときの最小単位

はじめに

自作でフォーム系のコンポーネント（input, radio, select）を作るときのメモです。

環境

nuxt 3.9.3
vue 3.4.13

コンポーネント

コンポーネントの実装は以下のようにしています。

<template>
  <input type="text" @input="updateValue" />
</template>

<script setup lang="ts">
interface Props {
  value: string
}
interface Emits {
  (event: 'update:value', value: string): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const value = useVModel(props, 'value', emit)

const updateValue = (event: Event) => {
  value.value = (event.target as HTMLInputElement).value 
}
</script>

使う側

<template>
  <div p="12px" flex="~ col" gap="4px" items="start">
    <span>名前</span>
    <AtomsInput v-model:value="name" />
    <span>- {{ name }} -</span>
  </div>
</template>

<script setup lang="ts">
const name = ref<string>('')
</script>

参考