vue3标签中的ref属性详解及如何使用$refs获取元素
作者：Yunmay
这篇文章主要给大家介绍了关于vue3标签中的ref属性详解及如何使用$refs获取元素的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
- 用在普通DOM标签上，获取的是DOM节点。
- 用在组件标签上，获取的是组件实例对象。
用在普通DOM标签中
获取dom元素方法一：
- 在需要获取的元素标签上添加ref属性
- 创建ref对象，存储ref属性标记的内容
- 通过ref上的value属性即可获取当前dom元素
<template>
<p>{{ person.name }}</p>
<!--1.在标签上写上ref属性-->
<div ref="msg">{{ person.age }}</div>
<p>{{ person.gender }}</p>
<button @click="getEle">获取元素</button>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
const person = reactive({
name: "neko",
age: 18,
gender: "女",
});
//2.创建一个引用变量去存储对div标签的引用
let msg = ref();
//3.获取元素
const getEle = () => {
console.log(msg.value); // <div>18</div>
};
</script>
获取dom元素方法二：
getCurrentInstance()：获取当前组件实例
- 在需要获取的元素标签上添加ref属性
- 通过getCurrentInstance解构出proxy
- 通过proxy.$refs.xxx即可获取当前dom元素
<template>
<p>{{ person.name }}</p>
<!--1.在标签上写上ref属性-->
<div ref="msg">{{ person.age }}</div>
<p>{{ person.gender }}</p>
<button @click="getEle">获取元素</button>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
//2.通过getCurrentInstance解构出proxy
const { proxy } = getCurrentInstance();
const person = reactive({
name: "neko",
age: 18,
gender: "女",
});
//3.获取元素
const getEle = () => {
console.log(proxy.$refs.msg); // <div>18</div>
};
</script>
用在组件标签上
defineExpose作用：向外暴露属性
<!-- 父组件 -->
<template>
<Demo ref="demoRef"></Demo>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Demo from "./components/Demo.vue";
let demoRef = ref();
onMounted(() => {
console.log(demoRef.value); // 访问子组件Demo中的属性
});
</script>
<!-- 子组件 -->
<template>
<p>{{ person.name }}</p>
<div>{{ person.age }}</div>
<p>{{ person.gender }}</p>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
const person = reactive({
name: "neko",
age: 18,
gender: "女",
});
let num1 = ref(0);
let num2 = ref(1);
let num3 = ref(2);
<!-- 使用defineExpose将组件中的数据交给外部，这样父组件中的demoRef.value才可以访问到如下数据 -->
defineExpose({ num1, num2, num3, person });
</script>总结
到此这篇关于vue3标签中的ref属性详解及如何使用$refs获取元素的文章就介绍到这了,更多相关vue3 $refs获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！