ref和$refs在vue2中的用法

### Vue 2 中 `ref` 和 `$refs` 的具体用法及区别 在 Vue 2 中，`ref` 和 `$refs` 是两个重要的特性，用于直接访问 DOM 元素或子组件实例。以下是它们的具体用法和区别。 #### 1. `ref` 的用法 `ref` 是一个特殊属性，可以绑定到元素或子组件上，为该元素或组件赋予一个引用名称。当绑定到普通 DOM 元素时，`ref` 返回的是该 DOM 元素；当绑定到子组件时，返回的是子组件的实例。 ```html <template> <div> <!-- 绑定到普通 DOM 元素 --> <p ref="paragraph">Hello World</p> <!-- 绑定到子组件 --> <ChildComponent ref="child" /> </div> </template> ``` 在上述代码中，`ref="paragraph"` 为 `<p>` 元素赋予了一个引用名称，而 `ref="child"` 则为 `ChildComponent` 子组件赋予了引用名称[^2]。 #### 2. `$refs` 的用法 `$refs` 是 Vue 实例的一个属性，它是一个对象，包含了所有通过 `ref` 注册的 DOM 元素或子组件实例。需要注意的是，`$refs` 只有在组件渲染完成后才会被填充，因此不能在初始渲染时访问它们[^4]。 以下是一个示例： ```javascript export default { mounted() { // 访问普通 DOM 元素 console.log(this.$refs.paragraph); // 输出: <p>HTML 元素</p> // 访问子组件实例 console.log(this.$refs.child); // 输出: 子组件的实例 } }; ``` #### 3. 区别与注意事项 - **响应性**：`$refs` 是非响应式的，因此不建议在模板中使用它进行数据绑定[^5]。 - **注册时间**：由于 `ref` 是在渲染结果中创建的，因此在组件的生命周期钩子中（如 `mounted`），才能安全地访问 `$refs`[^4]。 - **结合 `v-for` 使用**：如果将 `ref` 与 `v-for` 结合使用，那么 `$refs` 中对应的值将是一个数组，包含所有的 DOM 节点或组件实例。 ```html <template> <div> <div v-for="(item, index) in items" :key="index" ref="itemRefs"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'] }; }, mounted() { console.log(this.$refs.itemRefs); // 输出: [div, div, div] } }; </script> ``` #### 4. 总结 - 在 Vue 2 中，`ref` 用于为 DOM 元素或子组件赋予引用名称。 - `$refs` 是 Vue 实例的一个属性，用于访问所有通过 `ref` 注册的 DOM 元素或子组件实例。 - `$refs` 是非响应式的，且只有在组件渲染完成后才能访问[^2]。 ---