Vue Academy · 课时

defineExpose 与 useAttrs

Q: 「defineExpose 与 useAttrs」这节课中我会学到什么？

使用 defineExpose() 暴露组件内部内容，以及使用 useAttrs() 处理透传属性。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 defineExpose() 暴露组件内部内容，以及使用 useAttrs() 处理透传属性。

第 3 / 4 课13 个步骤

defineExpose 与 useAttrs 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

暴露与转发

还有两个工具可以完善组件通信：defineExpose 允许父组件访问子组件内部，useAttrs 则提供父组件传入的剩余属性。两者在可复用组件中都很常见。

组件默认是封闭的

使用 <script setup> 时，组件内部没有任何内容可以通过父组件的模板 ref 访问。这种封装很有用，但有时父组件确实需要调用子组件的方法。

使用 defineExpose 打开访问入口

defineExpose 会明确地向父组件公开选定的方法或值。请传入一个包含要共享内容的对象。

<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>

从父组件调用暴露的方法

父组件通过模板 ref 获取子组件，然后调用暴露的方法。只有传递给 defineExpose 的键才可见。

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>

<template>
  <Child ref="childRef" />
</template>

焦点示例

暴露一个 focus 方法后，父组件就可以让自定义组件内部的输入框获得焦点，同时不会破坏封装。

<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>

什么是透传属性

当父组件向您的组件添加一个未声明为 prop 或事件的属性（例如 class、id 或 data-*）时，它就会成为透传属性。

使用 useAttrs 读取 attrs

useAttrs() 会返回一个包含所有透传属性的对象。当您需要在脚本中检查或重新放置这些属性时，请使用它。

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>

自动透传

默认情况下，Vue 会将透传 attrs 应用到模板的单个根元素上。如果您的组件只有一个根 div，父组件提供的 class 就会自动添加到那里。

禁用自动透传

如果您希望将 attrs 放置在根元素以外的位置（例如包装组件中的内部输入框），请在普通脚本块中使用 inheritAttrs: false 关闭自动透传。

<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

使用 v-bind 转发 attrs

关闭自动透传后，使用 v-bind="attrs" 将 attrs 转发到您选择的元素。这是输入框包装组件的标准写法。

<template>
  <label>
    <span>Name</span>
    <input v-bind="attrs" />
  </label>
</template>

分别在何时使用

defineExpose：允许父组件通过模板 ref 调用子组件的方法。
useAttrs + inheritAttrs: false + v-bind：精确控制父组件提供的属性应放置在哪里。

快速检查

测试您对 defineExpose 和 attrs 的了解。

在交互式课程中回答

回顾

重点：

defineExpose 会将选定的方法和值公开给父组件的 ref。
透传 attrs 是父组件提供的、既不是 prop 也不是事件的属性。
useAttrs() 用于读取它们；自动透传的目标是根元素。
使用 inheritAttrs: false + v-bind="attrs" 可以重新指定它们的去向。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「defineExpose 与 useAttrs」课时是免费的吗？

是的 — 「defineExpose 与 useAttrs」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「defineExpose 与 useAttrs」这节课中我会学到什么？

使用 defineExpose() 暴露组件内部内容，以及使用 useAttrs() 处理透传属性。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「defineExpose 与 useAttrs」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy