Composition API: Хэлперы ​

useAttrs() ​

Возвращает из Setup контекста объект attrs, который включает в себя обычные атрибуты переданные текущему компоненту. Это предназначено для использования в <script setup>, где объект Setup контекст недоступен.

• Тип

  ts

  function useAttrs(): Record<string, unknown>

useSlots() ​

Возвращает из Setup контекста объект slots, включаещий переданные родителю слоты в виде вызываемых функции, возвращающих виртуальные узлы DOM. Это предназначено для использования в <script setup>, где объект 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() может использоваться в компонентах, не относящихся к SFC, например, при использовании необработанной функции setup(). В качестве первого аргумента она принимает объект props, а в качестве второго - имя модели. Необязательный третий аргумент может быть использован для объявления пользовательских геттеров и сеттеров для получившейся ref модели. Обратите внимание, что в отличие от defineModel(), вы сами должны объявить входные параметры(props) и эмиттеры.

useTemplateRef() ​

Возвращает неглубокую ref ссылку, значение которой будет синхронизировано с <template> элементом или компонентом с соответствующим атрибутом ref.

• Тип

  ts

  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() ​

Используется для генерации уникальных для каждого приложения идентификаторов для атрибутов доступности или элементов формы.

• Тип

  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(), уникальны для каждого приложения. Этот хэлпер можно использовать для генерации идентификаторов для элементов формы и атрибутов доступности. Несколько вызовов в одном и том же компоненте будут генерировать разные идентификаторы, несколько экземпляров одного и того же компонента, вызывающих useId(), также будут иметь разные идентификаторы.

  Идентификаторы, сгенерированные с помощью useId(), также гарантированно стабильны и для серверного и для клиентского рендеринга, поэтому их использование в SSR приложениях не приведёт к несоответствию гидратации.

  Если у вас есть несколько экземпляров Vue-приложения для одной и той же страницы, вы можете избежать конфликтов идентификаторов, задав каждому приложению свой ID-префикс через app.config.idPrefix.

  Caution

  useId() should be not be called inside a computed() property as it may cause instance conflicts. Instead, declare the ID outside of computed() and reference it within the computed function.