Skip to content

组合式 API:辅助 {#composition-api-helpers}

useAttrs() {#useattrs}

Setup 上下文中返回 attrs 对象,其中包含当前组件的透传 attributes。这是用于 <script setup> 中的,因为在 <script setup> 中无法获取 setup 上下文对象。

  • 类型

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

useSlots() {#useslots}

Setup 上下文中返回 slots 对象,其中包含父组件传递的插槽。这些插槽为可调用的函数,返回虚拟 DOM 节点。这是用于 <script setup> 中的,因为在 <script setup> 中无法获取 setup 上下文对象。

如果使用 TypeScript,建议优先使用 defineSlots()

  • 类型

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

useModel() {#usemodel}

这是驱动 defineModel() 的底层辅助函数。如果使用 <script setup>,应当优先使用 defineModel()

  • 仅在 3.4+ 版本中可用

  • 类型

```ts function useModel( props: Record, key: string, options?: DefineModelOptions ): ModelRef

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

type ModelRef = Ref & [ ModelRef, Record ] ```

  • 示例

js 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() {#usetemplateref}

返回一个浅层 ref,其值将与模板中的具有匹配 ref attribute 的元素或组件同步。

  • 类型

ts function useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>

  • 示例

```vue

```

useId() {#useid}

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

  • 类型

ts function useId(): string

  • 示例

```vue

```

  • 详细信息

useId() 生成的每个 ID 在每个应用内都是唯一的。它可以用于为表单元素和无障碍属性生成 ID。在同一个组件中多次调用会生成不同的 ID;同一个组件的多个实例调用 useId() 也会生成不同的 ID。

useId() 生成的 ID 在服务器端和客户端渲染之间是稳定的,因此可以安全地在 SSR 应用中使用,不会导致激活不匹配。

如果同一页面上有多个 Vue 应用实例,可以通过 app.config.idPrefix 为每个应用提供一个 ID 前缀,以避免 ID 冲突。

:::warning Caution useId() 不应在 computed() 属性内部调用,因为这可能导致实例冲突。相反,应在 computed() 外部声明 ID,并在计算函数内部引用它。 :::