Composition API: Хелперы ​

useAttrs() ​

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

• Тип

  ts

  function useAttrs(): Record<string, unknown>

useSlots() ​

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

useTemplateRef() ​

Возвращает неглубокую ссылку, значение которой будет синхронизировано с элементом шаблона или компонентом с соответствующим атрибутом 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">Имя:</label>
      <input :id="id" type="text" />
    </form>
  </template>

• Подробности

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

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

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