07. ref和$refs

vue2如果要操作dom，是使用ref和$refs来实现的。而vue3抛弃了refs，操作dom元素都使用ref

例子 (操作dom元素)

<template>
  <div>
    <p ref="pRef">我是p标签</p> <!--第1步，标签加上ref的名字，和vue2一样-->
  </div>
</template>
<script setup>
import { ref } from "vue";

const pRef = ref(""); // 第2步，用ref来定义一个表里，变量的名字必须和第1步的ref名字一致。
setTimeout(() => {
  pRef.value.innerHTML = "修改了标签内容";
}, 2000);
</script>

例子（调用子组件的方法）

parent.vue

<template>
  <div>
    <child ref="childRef" />
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
import child from "./child.vue";

const childRef = ref("");
nextTick(() => {
  childRef.value.say();
});
</script>

child.vue

<template>
  <div class="child"></div>
</template>
<script setup>
const say = () => {
  alert("i am child");
};
defineExpose({
  say,
});
</script>

注意点

1、子组件的属性或者方法，如果想被父组件访问到，必须用defineExpose方法导出去

2、上面的例子必须在nextTick方法才能调用成功。因为会先跑父组件的setup，此时子组件还未初始化。