Vue3学习——标签的ref属性

1. 在HTML标签上，可以使用相同的ref名称，得到DOM元素
2. ref放在组件上时，拿到的是组件实例（组件defineExpose暴露谁，ref才可以看到谁）

<script setup lang="ts">
import RefPractice from '@/components/ref_practice.vue'
import {ref} from 'vue'
const practice = ref()
const chackRef = () =>{
  console.log(practice.value)
}
</script>

<template>
  <RefPractice ref="practice" @click="chackRef"></RefPractice>
</template>

ref_practice.vue

<script setup lang="ts">
import {ref} from 'vue'

const a= ref(1)
const b = ref(2)

defineExpose({a}) // 只暴露a,所以父组件拿不到b

</script>

<template>
  <div class="refPractice">
    <div>ref标签</div>
  </div>

</template>