在
Vue中，
ref被用来给DOM元素或子组件注册引用信息。若在普通的DOM元素上
使用，引用信息就是元素；若在子组件上
使用，引用信息就是组件实例。在
Vue中直接操作DOM元素，必须用
ref属性进行注册[^1]。
###
Vue2中
ref的
使用方法
以下是一个在
Vue2中
使用ref获取DOM元素的示例代码：
```
vue
<template>
<div id="app">
<div
ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console
.log(this
.$
refs
.testDom)
}
}
};
</script>
```
在上述代码中，通过`
ref="testDom"`给`div`元素注册引用信息，在`getTest`方法里，
使用`this
.$
refs
.testDom`获取该DOM元素并打印到控制台[^1]。
###
Vue3中
ref的
使用方法
以下是
Vue3里
使用ref获取DOM元素的示例代码：
```
vue
<template>
<div id="app">
<div
ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
import {
ref } from "
vue";
export default {
setup() {
const testDom =
ref('')
const getTest = () => {
console
.log(testDom
.value);
}
return {
getTest,
testDom
}
},
}
</script>
```
在这个例子中，在`setup`函数里，
使用`
ref`函数创建一个响应式引用`testDom`，在`getTest`方法中，通过`testDom
.value`获取DOM元素并打印到控制台[^1]。
###
ref作用在外部元素上的
使用方法
以下是
ref作用在外部元素上的示例代码：
```
javascript
var
refoutsidedomTem = {
template: "<div class='childComp'><h5>我是子组件</h5></div>"
};
var
refoutsidedom = new
Vue({
el: "#
ref-outside-dom",
components: {
"component-father":
refoutsidedomTem
},
methods: {
console
Ref: function () {
console
.log(this);
console
.log(this
.$
refs
.outsideDom
Ref);
}
}
});
```
```html
<div id="
ref-outside-dom" v-on:click="console
Ref">
<component-father></component-father>
<p
ref="outsideDom
Ref">
ref在外面的元素上</p>
</div>
```
在这个示例中，在`p`标签上
使用`
ref="outsideDom
Ref"`注册引用信息，在`console
Ref`方法里，
使用`this
.$
refs
.outsideDom
Ref`获取该DOM元素并打印到控制台[^2]。
###
ref在v-for中的
使用方法
如果`
refs`自身的DOM，或父级的DOM是通过`v-for`渲染出来的，
Vue框架会把`
refInFor`设置成`true`，然后`
ref.key`在`register
Ref`函数就被设置成数组。示例代码如下：
```
vue
<template>
<div>
<div v-for="item in csGroupNameArr" :key="item">
<div
ref="arrayDiv">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
csGroupNameArr: ['item1', 'item2', 'item3']
};
},
mounted() {
this
.$nextTick(() => {
console
.log(this
.$
refs
.arrayDiv, 'arrayDiv')
})
}
};
</script>
```
在上述代码中，
使用`v-for`渲染多个`div`元素，并且给每个`div`元素设置`
ref="arrayDiv"`，在`this
.$nextTick`回调中，`this
.$
refs
.arrayDiv`会是一个包含所有`div`元素的数组[^3]。
本文介绍了在Vue中如何利用$refs属性来注册引用信息，并在表单提交后通过$refs.resetFields()方法清空表单内容。在DOM元素上，ref指向DOM元素，而在子组件上，它指向组件实例。示例代码展示了在el-form组件中如何应用此方法来实现表单数据的重置。
扫一扫
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
