Vue3学习（组合式API——ref模版引用与defineExpose编译宏函数）

目录

一、ref模版引用。

（1）基本介绍。

（2）核心基本步骤。(以获取DOM、组件为例)

（3）案例：获取dom对象演示。

<1>需求：点击按钮，让输入框聚焦。

（4）案例：获取组件实例内的属性和方法。(defineExpose编译宏函数)

二、ref模版引用与defineExpose编译宏函数小结。

---

一、ref模版引用。

（1）基本介绍。

• ref 模板引用是 Vue 提供的直接操作 DOM 或子组件的工具。
• （通过ref标识获取页面中真实的dom对象或者组件实例对象，从而就可以调用dom里面的属性和方法、组件内的属性和方法）
• 在 Vue3 组合式 API 中，ref 模板引用是用于在 JavaScript 中直接获取 DOM 元素或子组件实例引用的机制。

（2）核心基本步骤。(以获取DOM、组件为例)

1. 使用 ref 函数创建一个（ref对象）响应式引用（如 const inputRef = ref(null)）。其中初始值通常设为 null（表示无引用）。
2. 通过 ref 指令将变量与 DOM 元素或子组件关联。（如 <input ref="inputRef" /> 或 <ChildComponent ref="childRef" />）。这一步就是通过ref标识绑定ref对象到标签。
3. 模板渲染完成后！！ref 变量会自动指向对应的 DOM 元素或子组件实例。可在 onMounted 钩子（生命周期函数）或其他逻辑中使用。

（3）案例：获取dom对象演示。

<1>需求：点击按钮，让输入框聚焦。

• 代码示例。

<script setup>
//ref模版引用
import {onMounted, ref} from "vue";
//1.调用ref函数，生成一个ref对象
const input = ref(null)

//使用生命周期钩子：onMounted
onMounted(() => {
  //可以在页面渲染完成后，输入框自动聚焦
  /*input.value.focus()*/
})

const inputFocus = () =>{
  console.log(input.value)
  //3.通过ref对象.value即可访问绑定到的元素（必须渲染完成后才能拿到）
  input.value.focus()
}
</script>

<template>
  <div>
<!--    2.通过ref标识，进行绑定 -->
    <input ref="input" type="text">
    <button @click="inputFocus" style="margin-left: 10px">点击让输入框聚焦</button>
  </div>
</template>

<style scoped>
</style>

• 效果。

---

（4）案例：获取组件实例内的属性和方法。(defineExpose编译宏函数)

• 默认情况下：<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的！

---

• 想在父组件访问到可使用 defineExpose 编译宏指定属性、方法允许访问！！
• App.vue代码示例。

<script setup>
//引入子组件
import Test from "./components/Test.vue";
//ref模版引用
import {ref} from "vue";
//1.调用ref函数，生成一个ref对象
const testRef = ref(null)
const getTest = () => {
  console.log(testRef.value)
}
</script>

<template>
  <div>
    <h1>父组件App.vue</h1>
    <div class="test">
      <!--    2.通过ref标识，进行绑定 -->
      <Test ref="testRef"></Test>
      <button @click="getTest">获取组件内部属性和方法</button>
    </div>
  </div>
</template>

<style scoped>
.test {
  border: 1px solid #000;
  padding: 10px;
}
</style>

• Test.vue代码示例。

<script setup>
const count = 999
const sayHi = () =>{
  console.log('打招呼')
}
defineExpose({
  count,
  sayHi
})
</script>

<template>
  <div>
    <h2>我是用于测试的组件</h2>
  </div>
</template>

<style scoped>

</style>

• 页面渲染效果。

---

• 父组件中通过ref模版引用获取组件实例并使用组件内部的属性和函数。

---

---

---

二、ref模版引用与defineExpose编译宏函数小结。

1. 获取ref模版引用的时机是：组件挂载完毕之后！
2. defineExpose编译宏函数的作用：显示暴露组件内部的属性和方法(函数)。