组合API：助手函数

useAttrs()

返回从Setup上下文中获取的attrs对象，包括当前组件的fallthrough attributes。这通常用于<script setup>，其中setup上下文对象不可用。

类型

function useAttrs(): Record<string, unknown>

useSlots()

返回来自Setup 上下文的 slots 对象，该对象包括作为可调用函数传递的父级插槽，这些函数返回虚拟DOM节点。这旨在用于<script setup>，其中不可用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() 可用于非 SFC 组件，例如在使用原始 setup() 函数时。它期望 props 对象作为第一个参数，模型名称作为第二个参数。可选的第三个参数可用于声明自定义的获取器和设置器，用于生成的模型引用。请注意，与 defineModel() 不同，您需要自己声明 props 和 emits。

useTemplateRef()

返回一个浅引用，其值将与模板元素或具有匹配 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 上编辑此页面

组合API：助手函数 ​

useAttrs() ​

useSlots() ​

useModel() ​