当前位置：首页 > news >正文

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

news 来源：原创 2025/5/18 10:17:13

目录

一、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、组件为例)

使用 ref 函数创建一个（ref对象）响应式引用（如 const inputRef = ref(null)）。其中初始值通常设为 null（表示无引用）。
通过 ref 指令将变量与 DOM 元素或子组件关联。（如 <input ref="inputRef" /> 或 <ChildComponent ref="childRef" />）。这一步就是通过ref标识绑定ref对象到标签。
模板渲染完成后！！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"><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模版引用获取组件实例并使用组件内部的属性和函数。