辅助
1、useAttrs()
- 从 Setup 上下文中返回 attrs 对象，其中包含当前组件的透传 attributes。
- 这是用于 <script setup> 中的，因为在 <script setup> 中无法获取 setup 上下文对象的。
<script setup>
import { useAttrs } from 'vue'
const { title, content, onClick } = useAttrs()
</script>
2、useSlots()
- 从 Setup 上下文中返回 slots 对象，其中包含父组件传递的插槽。
- 这些插槽为可调用的函数，返回虚拟 DOM 节点。
- 这是用于 <script setup> 中的，因为在 <script setup> 中无法获取 setup 上下文对象的。
<script setup>
import { useSlots } from 'vue'
cosnt slots = useSlots()
</script>
3、useId()
- 用于为无障碍属性或表单元素生成每个应用内唯一的 ID。
- 生成的每个 ID 在每个应用内都是唯一的。
- 它可以用于为表单元素和无障碍属性生成 ID。在同一个组件中多次调用会生成不同的 ID；同一个组件的多个实例调用 useId() 也会生成不同的 ID。
- 如果同一页面上有多个 Vue 应用实例，可以通过 app.config.idPrefix 为每个应用提供一个 ID 前缀，以避免 ID 冲突。
- 生成的 ID 在服务器端和客户端渲染之间是稳定的，因此可以安全地在 SSR 应用中使用，不会导致激活不匹配。
- 仅在 3.5+ 版本中可用
<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template>
<form>
<label :for="id">Name:</label>
<input :id="id" type="text" />
</form>
</template>
4、useTemplateRef()
- 返回一个浅层 ref，其值将与模板中的具有匹配 ref attribute 的元素或组件同步。
- 仅在 3.5+ 版本中可用
<script setup>
import { useTemplateRef, onMounted } from 'vue'
const inputRef = useTemplateRef('input')
onMounted(() => {
inputRef.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
5、useModel()
- 这是驱动 defineModel() 的底层辅助函数。如果使用 <script setup>，应当优先使用 defineModel()。
- useModel() 可以用于非单文件组件，例如在使用原始的 setup() 函数时。它预期的第一个参数是 props 对象，第二个参数是 model 名称。
- 可选的第三个参数可以用于为生成的 model ref 声明自定义的 getter 和 setter。请注意，与 defineModel() 不同，你需要自己声明 props 和 emits。
- 仅在 3.4+ 版本中可用
export default {
props: ['count'],
emits: ['update:count'],
setup(props) {
const msg = useModel(props, 'count')
msg.value = 1
}
}
