useId 组合式API | Quasar Framework

为什么捐赠

API 浏览器

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Vue 指令

Quasar 插件

Vue 组合式函数

useQuasar

useDialogPluginComponent

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

联系站长

useId 组合式API

Quasar v2.15+

useId() 组合式API返回一个Vue引用，其中包含一个可用作DOM节点属性唯一标识符的字符串。

如果您提供一个函数（下面类型定义中的getValue）来获取ID可能具有的值，它将确保保持更新。

在SSR中，它考虑了水合(hydration)过程，因此您的组件不会生成任何此类错误。

语法

import { useId } from 'quasar'

setup () {
  const id = useId()
  // ...
}

function useId(
  opts?: {
    getValue?: () => string | null | undefined;
    required?: boolean; // 默认值: true
  }
): Ref<string | null>;

示例

<template>
  <div :id="id">某个组件</div>
</template>

<script>
  import { useId } from "quasar";

  export default {
    props: {
      for: String,
    },

    setup() {
      const id = useId({
        getValue: () => props.for,
        required: true,
      });

      return { id };
    },
  };
</script>

发现错误？在浏览器中编辑此页

1. Introduction

2. 语法

3. 示例