vue之标签的ref 属性

1.ref 属性概述

1.1 作用和特点

（1）作用：用来给元素或组件注册引用信息(相当于是id的替代者)
（2）应用在HTML标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象

2.vue2用法

2.1 获取 dom

（1）目标标签 – 添加 ref 属性

（2）恰当时机(至少要等元素被渲染后，也就是mounted后), 可以通过 this.$refs.xxx, 获取目标标签

2.3 获取组件：

（1）目标组件 – 添加 ref 属性

 <Table ref="eleTable" @handle="handleFun"></Table>

（2）恰当时机(只少要等元素被渲染后), 通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法和属性

this.$refs.eleTable.子组件的方法名+()
 
this.$refs.eleTable.子组件的属性名

3.vue3用法

3.1

<template>
  <div>
    <h2 ref="title2">前端</h2>
    <button @click="showLog">点我打印内容</button>
  </div>
</template>

<script lang="ts" setup>
  import {ref} from 'vue'
  let title2 = ref()
  
  function showLog(){
    // 通过ref获取元素
    console.log(title2.value)
  
  }
</script>

3.2 父组件中调用子组件

<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>