Composition API: ヘルパー

useAttrs()

現在のコンポーネントのフォールスルー属性を含む、Setup Context からの attrs オブジェクトを返します。これは Setup Context オブジェクトが利用できない <script setup> での利用を意図しています。

型

function useAttrs(): Record<string, unknown>

useSlots()

仮想 DOM ノードを返す呼び出し可能な関数として、親に渡されたスロットを含む Setup Context から slots オブジェクトを返します。これは Setup Context オブジェクトが利用できない <script setup> での利用を意図しています。

TypeScript を使用する場合は、代わりに defineSlots() を優先すべきです。

型

function useSlots(): Record<string, (...args: any[]) => VNode[]>

useModel()

これは、defineModel() を動かすための基礎となるヘルパーです。<script setup> を使用する場合は、defineModel() を使用することを推奨します。

3.4 以上でのみ使用できます

型

function 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>
]

例

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 を返します。

型

function 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 を生成するために使用します。

型
ts
```
function 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 の衝突を避けることができます。

このページを GitHub で編集

Composition API: ヘルパー ​

useAttrs() ​

useSlots() ​

useModel() ​