useId 组合
Quasar v2.15+
useId()
可组合项返回一个 Vue Ref,其中包含一个字符串,该字符串可用作唯一标识符,并应用于 DOM 节点属性。
¥The useId()
composable returns a Vue Ref holding a string that can be used as a unique identifier to apply to a DOM node attribute.
如果你提供一个函数(下面输入的 getValue
)来获取 id 可能具有的值,它将确保保持更新。
¥Should you supply a function (getValue
from the typing below) to get the value that the id might have, it will make sure to keep it updated.
在服务器端渲染 (SSR) 中,它会考虑水合 (hydration) 过程,以便你的组件不会生成任何此类错误。
¥On SSR, it takes into account the process of hydration so that your component won’t generate any such errors.
语法(Syntax)
¥Syntax
import { useId } from 'quasar'
setup () {
const id = useId()
// ...
}
content_paste
function useId(
opts?: {
getValue?: () => string | null | undefined;
required?: boolean; // default: true
}
): Ref<string | null>;
content_paste
示例(Example)
¥Example
<template>
<div :id="id">
Some component
</div>
</template>
<script>
import { useId } from 'quasar'
export default {
props: {
for: String
},
setup () {
const id = useId({
getValue: () => props.for,
required: true
})
return { id }
}
}
</script>
content_paste