[Vue3] ref属性

简介

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>