vue中ref的作用
1. 获取页面的DOM元素
2. 用于组件之间的通信，获取子组件对象
子组件：
<template>
<div class="Ref">
11
</div>
</template>
<script>
export default {
name: "Ref",
data() {
return {
message: "我是子组件的数据"
}
},
methods: {
add: function (num1, num2) {
return num1 + num2
}
}
}
</script>
父组件
<template>
<div class="Refs">
<!--定义ref属性，用来给元素或者子组件注册引用信息，父组件通过$refs获取到对应的DOM对象，和子组件的信息-->
<p ref="p" id="pId">我是父组件p标签</p>
<Ref ref="helloWorld"/>
</div>
</template>
<script>
import Ref from "@/components/Ref";
export default {
name: "Refs",
components: {
Ref
},
mounted() {
//获取DOM元素
console.log(this.$refs);
//获取子组件对象
console.log(this.$refs.helloWorld.message);
console.log(this.$refs.helloWorld.add(1, 2));//3
},
}
</script>
