如何在Vue中访问子组件内部的元素

作者头像东城·2026-01-31 23:32:44·
如何在Vue中访问子组件内部的元素
引言
在Vue开发中，我们经常需要从父组件访问子组件内部的DOM元素。这是一个常见的需求，比如需要聚焦输入框、获取元素尺寸等。本文将介绍几种在Vue中实现这一目标的方法。
问题场景
假设有一个BaseInput.vue组件，其中包含一个input元素：
  1. <!-- BaseInput.vue -->
  2. <template>
  3. <input type="text">
  4. </template>
vue
这个BaseInput.vue组件在App.vue中使用：
  1. <!-- App.vue -->
  2. <script setup>
  3. import BaseInput from './components/BaseInput.vue';
  4. </script>

  6. <template>
  7. <BaseInput />
  8. </template>
vue
常见错误
在App.vue中，我们不能直接使用ref访问BaseInput组件内部的input元素，它只能提供对组件实例属性的访问。
例如，如果我们尝试聚焦输入框，会导致错误：
  1. <!-- App.vue -->
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. import BaseInput from './components/BaseInput.vue';

  6. const baseInputEl = ref()

  8. onMounted(() => {
  9. baseInputEl.value.focus() // Uncaught TypeError: baseInputEl.value.focus is not a function
  10. })
  11. </script>

  13. <template>
  14. <BaseInput ref="baseInputEl" />
  15. </template>
vue
解决方案：使用defineExpose
要解决这个问题，我们可以在BaseInput组件内部使用defineExpose函数来暴露input元素。
  1. <!-- BaseInput.vue -->
  2. <script setup>
  3. import { ref } from 'vue';

  5. const inputEl = ref()

  7. defineExpose({
  8. inputEl
  9. })
  10. </script>

  12. <template>
  13. <input type="text" ref="inputEl">
  14. </template>
vue
现在，当我们访问BaseInput组件的ref时，它包含一个inputEl属性，该属性引用组件内部的input元素。我们现在可以在它上面调用focus()方法。
  1. <!-- App.vue -->
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. import BaseInput from './components/BaseInput.vue';

  6. const baseInputEl = ref()

  8. onMounted(() => {
  9. baseInputEl.value.inputEl.focus() // 现在可以工作了
  10. })
  11. </script>

  13. <template>
  14. <BaseInput ref="baseInputEl" />
  15. </template>
vue
Vue 3.5的新特性：useTemplateRef
此外，在Vue 3.5中，我们可以使用useTemplateRef函数，使在模板中访问元素变得更容易，而无需创建与ref属性同名的响应式变量。
  1. <!-- App.vue -->
  2. <script setup>
  3. import { onMounted, useTemplateRef } from 'vue'
  4. import BaseInput from './components/BaseInput.vue';

  6. const baseInputEl = useTemplateRef('base-input')

  8. onMounted(() => {
  9. baseInputEl.value.inputEl.focus() // 可以工作
  10. })
  11. </script>

  13. <template>
  14. <BaseInput ref="base-input" />
  15. </template>
vue
实际应用示例
1. 表单验证后聚焦输入框
  1. <!-- LoginForm.vue -->
  2. <script setup>
  3. import { ref } from 'vue'
  4. import BaseInput from './components/BaseInput.vue'

  6. const usernameInput = ref()
  7. const passwordInput = ref()

  9. const handleSubmit = () => {
  10. // 验证逻辑
  11. if (!username.value) {
  12. usernameInput.value.inputEl.focus()
  13. return
  14. }
  15. if (!password.value) {
  16. passwordInput.value.inputEl.focus()
  17. return
  18. }
  19. // 提交表单
  20. }
  21. </script>

  23. <template>
  24. <form @submit.prevent="handleSubmit">
  25. <BaseInput ref="usernameInput" placeholder="用户名" />
  26. <BaseInput ref="passwordInput" type="password" placeholder="密码" />
  27. <button type="submit">登录</button>
  28. </form>
  29. </template>
vue
2. 获取元素尺寸
  1. <!-- ResizableComponent.vue -->
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. import BaseInput from './components/BaseInput.vue'

  6. const inputRef = ref()

  8. onMounted(() => {
  9. const rect = inputRef.value.inputEl.getBoundingClientRect()
  10. console.log('输入框尺寸:', rect.width, rect.height)
  11. })
  12. </script>

  14. <template>
  15. <BaseInput ref="inputRef" />
  16. </template>
vue
3. 动态设置样式
  1. <!-- CustomInput.vue -->
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. import BaseInput from './components/BaseInput.vue'

  6. const inputRef = ref()

  8. onMounted(() => {
  9. // 动态设置样式
  10. inputRef.value.inputEl.style.borderColor = 'red'
  11. inputRef.value.inputEl.style.backgroundColor = '#f0f0f0'
  12. })
  13. </script>

  15. <template>
  16. <BaseInput ref="inputRef" />
  17. </template>
vue
最佳实践
1. 明确暴露的接口
  1. <!-- BaseInput.vue -->
  2. <script setup>
  3. import { ref } from 'vue'

  5. const inputEl = ref()

  7. // 只暴露必要的方法和属性
  8. defineExpose({
  9. inputEl,
  10. focus: () => inputEl.value.focus(),
  11. blur: () => inputEl.value.blur(),
  12. select: () => inputEl.value.select(),
  13. getValue: () => inputEl.value.value,
  14. setValue: (value) => { inputEl.value.value = value }
  15. })
  16. </script>

  18. <template>
  19. <input type="text" ref="inputEl">
  20. </template>
vue
2. 使用TypeScript类型定义
  1. <!-- BaseInput.vue -->
  2. <script setup lang="ts">
  3. import { ref } from 'vue'

  5. const inputEl = ref<HTMLInputElement>()

  7. interface ExposedMethods {
  8. inputEl: HTMLInputElement
  9. focus: () => void
  10. blur: () => void
  11. select: () => void
  12. getValue: () => string
  13. setValue: (value: string) => void
  14. }

  16. defineExpose<ExposedMethods>({
  17. inputEl: inputEl.value!,
  18. focus: () => inputEl.value?.focus(),
  19. blur: () => inputEl.value?.blur(),
  20. select: () => inputEl.value?.select(),
  21. getValue: () => inputEl.value?.value || '',
  22. setValue: (value: string) => {
  23. if (inputEl.value) {
  24. inputEl.value.value = value
  25. }
  26. }
  27. })
  28. </script>

  30. <template>
  31. <input type="text" ref="inputEl">
  32. </template>
vue
3. 错误处理
  1. <!-- App.vue -->
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. import BaseInput from './components/BaseInput.vue'

  6. const baseInputEl = ref()

  8. onMounted(() => {
  9. try {
  10. if (baseInputEl.value?.inputEl) {
  11. baseInputEl.value.inputEl.focus()
  12. } else {
  13. console.warn('无法访问输入框元素')
  14. }
  15. } catch (error) {
  16. console.error('聚焦输入框时出错:', error)
  17. }
  18. })
  19. </script>

  21. <template>
  22. <BaseInput ref="baseInputEl" />
  23. </template>
vue
注意事项
组件封装性：过度暴露内部元素可能破坏组件的封装性，应该谨慎使用
生命周期：确保在组件挂载后再访问元素
类型安全：使用TypeScript可以提供更好的类型检查和代码提示
性能考虑：频繁访问DOM元素可能影响性能，应该缓存引用
总结
通过使用defineExpose，我们可以在Vue中安全地访问子组件内部的DOM元素。这种方法既保持了组件的封装性，又提供了必要的灵活性。在Vue 3.5中，useTemplateRef进一步简化了这个过程。
选择合适的方法取决于你的具体需求：
简单场景：使用defineExpose
复杂场景：结合TypeScript和错误处理
Vue 3.5+：考虑使用useTemplateRef
记住，访问子组件内部元素应该是一个例外而不是常规做法，优先考虑通过props和事件进行组件间通信。