Vue中通过`re组件实例详解_中通过_this.$refs.username.value

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

Vue中通过`ref`获取DOM元素和组件实例详解

一、Vue中使用`ref`属性的基础知识

在Vue中，`ref`属性就像是一个标签，你可以把它贴在元素或组件上，然后通过这个标签在Vue实例中找到对应的DOM元素或组件实例。

二、使用`ref`获取DOM元素

获取DOM元素是`ref`的一个常见用法。下面是一个简单的例子，展示如何获取DOM元素并修改它的内容。

模板部分 脚本部分 
<div ref="myDiv">Hello, Vue!</div>
 
methods: { changeText() { this.$refs.myDiv.textContent = 'Hello, World!'; } }

三、使用`ref`获取子组件实例

除了获取DOM元素，`ref`还可以用来获取子组件实例，这样你就可以调用子组件的方法或访问它的数据。

模板部分 子组件部分 父组件脚本部分 
<child-component ref="childRef"></child-component>
 
<template> <div>I am a child component!</div> </template> <script> export default { methods: { childMethod() { console.log('Child method called'); } } } </script>
 
methods: { callChildMethod() { this.$refs.childRef.childMethod(); } }

四、在循环中使用`ref`

在Vue中，你还可以在循环中使用`ref`，并通过数组访问这些引用。

模板部分 脚本部分 
<div v-for="(item, index) in items" :key="index" ref="itemRefs">{{ item.name }}</div>
 
mounted() { this.$nextTick(() => { this.itemRefs.forEach((ref, index) => { console.log(ref.textContent); // 输出每个元素的文本内容 }); }); }

五、使用`ref`的注意事项

虽然`ref`很强大，但使用时也有一些注意事项：

六、综合示例：表单验证

最后，我们通过一个表单验证的例子来展示如何使用`ref`。

模板部分 脚本部分 
<input type="text" ref="username" placeholder="Enter username"> <input type="password" ref="password" placeholder="Enter password"> <button @click="validateForm">Submit</button>
 
methods: { validateForm() { if (!this.$refs.username.value || !this.$refs.password.value) { alert('Username and password cannot be empty'); } } }

总结：在Vue中，通过`ref`可以方便地获取DOM元素和组件实例，从而进行各种操作。记得在使用`ref`时要谨慎，遵循Vue的最佳实践。