简介
Vue3中使用setup语法糖之后,在组件或普通dom元素上使用ref属性,可以得到注册元素或子组件的引用。
如果用于普通dom元素,引用将是元素本身;如果用于子组件,引用将是子组件的实例。
理解
首先ref
可以声明为一个string
,它相当于dom节点,类似document.getElementById("#id")
时可以拿到的东西。但是由于Vue使用虚拟dom,在渲染初期并没有ref这个属性,只有在Vue实例被创建后才会把这个属性加到虚拟dom中,所以官方文档说明:
ref 本身是作为渲染函数的结果来创建的,必须等待组件挂载后才能对它进行访问。
即在onMounted
之后才可以使用,也不要把ref
的值写在template
里。
vue3中使用
子组件通过defineExpose
暴露自身的属性和方法,父组件通过ref
属性可以调用。
// 父组件
<script setup>
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';
const childRef = ref();
onMounted(() => {
console.log(childRef.value); // child 组件实例
console.log(childRef.value.message); // 我是子组件
childRef.value.onChange(); // 我是子组件方法
});
</script>
<template>
<MyComponent ref="childRef"/>
</template>
// 子组件
<script setup>
import { ref } from "vue";
const message = ref("我是子组件");
const onChange = () => {
console.log("我是子组件方法")
};
defineExpose({
message,
onChange
});
</script>
<template>
<div>{{ message }}</div>
</template>