Composition API: ヘルパー
useAttrs()
現在のコンポーネントのフォールスルー属性を含む、Setup Context からの attrs
オブジェクトを返します。これは Setup Context オブジェクトが利用できない <script setup>
での利用を意図しています。
型
tsfunction useAttrs(): Record<string, unknown>
useSlots()
仮想 DOM ノードを返す呼び出し可能な関数として、親に渡されたスロットを含む Setup Context から slots
オブジェクトを返します。これは Setup Context オブジェクトが利用できない <script setup>
での利用を意図しています。
TypeScript を使用する場合は、代わりに defineSlots()
を優先すべきです。
型
tsfunction useSlots(): Record<string, (...args: any[]) => VNode[]>
useModel()
これは、defineModel()
を動かすための基礎となるヘルパーです。<script setup>
を使用する場合は、defineModel()
を使用することを推奨します。
3.4 以上でのみ使用できます
型
tsfunction useModel( props: Record<string, any>, key: string, options?: DefineModelOptions ): ModelRef type DefineModelOptions<T = any> = { get?: (v: T) => any set?: (v: T) => any } type ModelRef<T, M extends PropertyKey = string, G = T, S = T> = Ref<G, S> & [ ModelRef<T, M, G, S>, Record<M, true | undefined>
]
- **例**
```js
export default {
props: ['count'],
emits: ['update:count'],
setup(props) {
const msg = useModel(props, 'count')
msg.value = 1
}
}
詳細
useModel()
は、例えば生のsetup()
関数を使用する場合など、SFC 以外のコンポーネントで使用することができます。第一引数としてprops
オブジェクトを、第二引数としてモデル名を指定します。省略可能な第三引数は、結果の ref モデルに対してカスタムゲッターとカスタムセッターを宣言するために使われます。defineModel()
とは異なり、props や emits の宣言は自身で行うことに注意してください。
useTemplateRef()
一致する ref 属性を持つテンプレート要素、またはコンポーネントと値が同期される shallow ref を返します。
型
tsfunction useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>
例
vue<script setup> import { useTemplateRef, onMounted } from 'vue' const inputRef = useTemplateRef('input') onMounted(() => { inputRef.value.focus() }) </script> <template> <input ref="input" /> </template>
参照
useId()
アクセシビリティ属性やフォーム要素に対して、アプリケーションごとに一意な ID を生成するために使用します。
型
tsfunction useId(): string
例
vue<script setup> import { useId } from 'vue' const id = useId() </script> <template> <form> <label :for="id">Name:</label> <input :id="id" type="text" /> </form> </template>
詳細
useId()
で生成された ID はアプリケーションごとに一意なものになります。フォーム要素やアクセシビリティ属性の ID を生成するために使用できます。同じコンポーネントで複数回呼び出すと、異なる ID が生成されます。useId()
を呼び出す同じコンポーネントの複数のインスタンスも、異なる ID を持つことになります。useId()
で生成された ID は、サーバとクライアントのレンダー間で安定していることが保証されているため、SSR アプリケーションでもハイドレーションミスマッチを起こすことなく使用できます。同じページ内に複数の Vue アプリケーションのインスタンスがある場合、
app.config.idPrefix
を使用して各アプリケーションに ID プレフィックスを与えることで、ID の衝突を避けることができます。