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 里面定义的变量
}
}