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用法

父组件中调用子组件Table
（1）template

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

（2）script中

import { ref } from 'vue'

setup() { 
   //ref方法
    const eleTable = ref()  //eleTable是页面ref后面对应的名字
    const clickSon = () => {
      eleTable.value.changeShowText() //调用子组件的方法
      let arr = eleTable.value.tableData //获取子组件 setup 里面定义的变量
    }
}