vue3标签中的ref属性&如何使用$refs获取元素

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

用在普通DOM标签中

获取dom元素方法一：

1. 在需要获取的元素标签上添加ref属性

2. 创建ref对象，存储ref属性标记的内容

3. 通过ref上的value属性即可获取当前dom元素

   {{ person.name }}

   {{ person.age }}

   {{ person.gender }}

获取dom元素方法二：

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

1. 在需要获取的元素标签上添加ref属性

2. 通过getCurrentInstance解构出proxy

3. 通过proxy.$refs.xxx即可获取当前dom元素

   {{ person.name }}

   {{ person.age }}

   {{ person.gender }}

用在组件标签上

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>