IT评测·应用市场-qidao123.com技术社区

标题: vue3标签中的ref属性&怎样使用$refs获取元素 [打印本页]

---

作者: 大连全瓷种植牙齿制作中心    时间: 2024-12-29 12:48
标题: vue3标签中的ref属性&怎样使用$refs获取元素

• 用在普通DOM标签上，获取的是DOM节点。
  
• 用在组件标签上，获取的是组件实例对象。
  

用在普通DOM标签中

获取dom元素方法一：

• 在需要获取的元素标签上添加ref属性
  
• 创建ref对象，存储ref属性标记的内容
  
• 通过ref上的value属性即可获取当前dom元素
  {{ person.name }}
            {{ person.age }}    {{ person.gender }}
  

获取dom元素方法二：

   getCurrentInstance()：获取当前组件实例
  

• 在需要获取的元素标签上添加ref属性
  
• 通过getCurrentInstance解构出proxy
  
• 通过proxy.$refs.xxx即可获取当前dom元素
  {{ person.name }}
            {{ person.age }}    {{ person.gender }}
  

用在组件标签上

   defineExpose作用：向外暴露属性

1. <!-- 父组件 -->      
2. <template>      
3.   <Demo ref="demoRef"></Demo>      
4. </template>      
6. <script setup>      
7. import { ref, onMounted } from "vue";      
8. import Demo from "./components/Demo.vue";      
10. let demoRef = ref();      
12. onMounted(() => {      
13.   console.log(demoRef.value);  // 访问子组件Demo中的属性
14. });
15. </script>      
18. <!-- 子组件 -->      
19. <template>      
20.   <p>{{ person.name }}</p>      
21.   <div>{{ person.age }}</div>      
22.   <p>{{ person.gender }}</p>      
23. </template>      
25. <script setup>      
26. import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
28. const person = reactive({  
29.   name: "neko",
30.   age: 18,
31.   gender: "女",
32. });
34. let num1 = ref(0);
35. let num2 = ref(1);
36. let num3 = ref(2);
37. <!-- 使用defineExpose将组件中的数据交给外部，这样父组件中的demoRef.value才可以访问到如下数据 -->
38. defineExpose({ num1, num2, num3, person });
39. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4