vue3基础：模板引用(ref属性的使用)

DOM上的ref

<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const inputRef= ref(null)
const footerRef = ref(null);
onMounted(() => {
  inputRef.value.focus(); // 输入框聚焦
  console.log(footerRef.value); // 打印该Dom
})
</script>
<template>
  <input ref="inputRef"/>
  <div ref="footerRef"></div>
</template>

组件上的ref

<script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

// 子组件中
<script setup>
const title = ref('ALL IS WELL');
const changeName = name =>{
	title.value = name;
}
defineExpose(['title','changeName']);
</script>
<template>
  <div>子组件</div>
</template>


// 父组件
<script setup>
import { ref, onMounted } from 'vue'
import AsideMenu from './AsideMenu.vue'
const asideMenuRef= ref(null)
onMounted(() => {
  console.log(asideMenuRef.value.title); // "ALL IS WELL"
  asideMenuRef.value.changeName('new title'); // 子组件中的title值由"ALL IS WELL "变成了"new title"
})
</script>
<template>
  <AsideMenu ref="asideMenuRef" />
</template>