辅助函数

useAttrs()

从Setup 上下文中返回 attrs 对象，包含父组件传递给子组件，但子组件没有使用defineProps()接收的属性。这是用于 <script setup> 中的，因为在 <script setup> 中无法获取 setup 上下文对象的。

function useAttrs(): Record<string, unknown>

useSlots()

从Setup 上下文中返回 slots 对象，其中包含父组件传递的插槽。这些插槽为可调用的函数，返回虚拟 DOM 节点。这是用于 <script setup> 中的，因为在 <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
)

type DefineModelOptions<T = any> = {
  get?: (v: T) => any
  set?: (v: T) => any
}

示例

export default {
  props: ['count'],
  emits: ['update:count'],
  setup(props) {
    const msg = useModel(props, 'count')
    msg.value = 1
  }
}

详细信息

useModel() 可以用于非单文件组件，例如在使用原始的 setup() 函数时。它预期的第一个参数是 props 对象，第二个参数是 model 名称。可选的第三个参数可以用于为生成的 model ref 声明自定义的 getter 和 setter。请注意，与 defineModel() 不同，你需要自己声明 props 和 emits。

useTemplateRef()

3.5+，返回一个ShallowRef，其值将与模板中的具有匹配 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>

使用useTemplateRef()的好处是，当使用ref获取一个组件引用时，子组件不需要再使用defineExpose()将数据暴露

useId()

用于为无障碍属性或表单元素生成每个应用内唯一的 ID。

类型

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 冲突。

辅助函数 ​

useAttrs() ​

useSlots() ​

useModel() ​

useTemplateRef() ​

useId() ​