本文へジャンプ

Composition API: ヘルパー

useAttrs()

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

  • ts
    function useAttrs(): Record<string, unknown>

useSlots()

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

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

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

useModel()

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

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

  • ts
    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>

]


- **例**

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

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

Composition API: ヘルパーが読み込まれました