关于<element #foo />语法含义及<input #foo />语法疑问的技术问询

算力阿峰

2026-5-22

关于<input #foo />语法的详解

嘿，这个问题问得特别到位！你看到的<input #foo />并不是原生HTML的语法，而是Vue框架专属的模板引用（Template Ref）语法，和你熟悉的<input id="foo" />有着本质区别哦～

核心含义

这个语法是Vue提供的语法糖，用来在组件实例中快速获取对应的DOM元素或者子组件实例。它不会被编译成原生的id="foo"属性，而是会把目标元素挂载到组件的$refs对象（Vue 2）或者对应的响应式变量（Vue 3组合式API）上，让你能直接在代码里操作这个元素。

和原生`id="foo"`的区别

原生id是HTML全局属性，作用是在整个页面中唯一标识元素，可用于CSS选择器、页面锚点、原生JS的document.getElementById()等，但同一个页面里不能有重复的id。
Vue模板引用是框架层面的特性，作用域仅限于当前组件内部，不会污染全局环境，而且相同的引用名可以在不同组件中重复使用，更适合组件化开发中操作DOM的场景。

实际使用示例

Vue 3 组合式API（`<script setup>`）

<template>
  <input #foo type="text" placeholder="点击按钮聚焦我" />
  <button @click="focusInput">聚焦输入框</button>
</template>

<script setup>
import { ref } from 'vue'
// 这里的变量名必须和模板里的#foo完全一致
const foo = ref(null)

const focusInput = () => {
  // 通过.value访问DOM元素，调用原生focus方法
  foo.value?.focus()
}
</script>

Vue 2 选项式API

<template>
  <input #foo type="text" placeholder="点击按钮聚焦我" />
  <button @click="focusInput">聚焦输入框</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 通过this.$refs.foo访问DOM元素
      this.$refs.foo.focus()
    }
  }
}
</script>