vue3 内置的特殊属性ref

Vue 3 中的数据绑定是通过模板语法实现的。开发者可以在模板中使用特殊的语法来绑定数据,例如使用双花括号 {``{}} 来显示数据,或者使用 v-bind 指令来绑定属性。

当数据发生变化时,Vue 会自动更新绑定的数据在模板中的显示,实现页面的自动更新。

虽然 Vue 的响应式数据驱动模式非常强大,但有时直接访问底层 DOM 元素是必要的。

vue3 内置的特殊属性ref

ref 是一个特殊的 attribute,它允许在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用。

  • ref 用于注册元素或子组件的引用。
  • ref参数类型:string | Function
    • 当使用字符串作为参数时,这个字符串将作为引用的名称,可以在组件的逻辑部分通过this.$refs[refName]来访问对应的元素或组件实例。
    • 当使用函数作为参数时,这个函数将在组件挂载后被调用,函数的参数是对应的元素或组件实例。

使用选项式 API,引用将被注册在组件的 this.$refs 对象里

html 复制代码
<!-- 存储为 this.$refs.p -->
<p ref="p">hello</p>

使用组合式 API,引用将存储在与名字匹配的 ref

用在普通DOM标签上,获取的是DOM节点

示例:

html 复制代码
<template>
  <div>
    <div ref="domDiv">hi, 这是有ref属性的div</div>
    <button @click="showLog">点击输出div</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';

// 创建一个名为domDiv的响应式引用,用于存储ref标记的内容
let domDiv = ref()
// 初始化时立即打印,此时组件还未挂载,domDiv.value 必然为 undefined
console.log(domDiv.value)  // undefined


const showLog = () => {
  console.log(domDiv.value)
}

</script>

用在组件标签上,获取的是组件实例对象

Parent.vue引用Child.vue

html 复制代码
<template>
  <div>
    <Child ref="cihldRef" />
    <button @click="showChildRef">点击输出childRef</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';
import Child from './Child.vue';
// 
let cihldRef = ref()
const showChildRef = () => {
  console.log(cihldRef.value)
}
</script>

一旦组件被挂载,cihldRef.value 将指向对应的组件实例对象。通过这个实例对象,可以调用组件的方法、访问组件的属性等。

打印cihldRef.value ,控制台输出结果如下:

子组件Child.vue没有暴露任何属性、方法给父组件。

defineExpose

当一个组件使用组合式 API 编写时,默认情况下,父组件无法直接访问 子组件内部定义的响应式变量和方法。

通过使用defineExpose,可以有选择地将子组件内部的一些属性和方法暴露给父组件。

这是上面例子中的Child.vue:

javascript 复制代码
<template>
  <div>
    <div>count: {{ count }}</div>
    <button @click="addCount">点击 count+1</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

let count = ref(0);

const addCount = () => {
  count.value++;
};

// 把属性count、方法addCount暴露给父组件
defineExpose({
  count,
  addCount
});
</script>

在父组件Parent.vue中执行console.log(cihldRef.value),控制台输出结果:

可以看到,子组件Child.vue把属性count、方法addCount暴露给父组件Parent.vue

在父组件Parent.vue中,调用子组件的addCount

javascript 复制代码
const showChildRef = () => {
  console.log(cihldRef.value)
  cihldRef.value.addCount()
}

ref 可以接收一个函数值,用于对存储引用位置的完全控制

在模板中,当使用 ref 并传入一个函数时,这个函数会在组件挂载后被调用,并且接收被引用的组件实例或 DOM 元素作为参数。

示例:

html 复制代码
<template>
  <ChildComponent :ref="(el) => child = el" />
</template>

在这个例子中,当 <ChildComponent> 组件挂载后,传入的函数 (el) => child = el 会被调用,参数 el 代表 <ChildComponent> 组件的实例。这个函数将组件实例赋值给了外部定义的变量 child,从而可以在其他地方通过 child 来访问 <ChildComponent> 组件的实例。

相关推荐
摸鱼仙人~1 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo3 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末21 分钟前
React——基础
前端·react.js·前端框架
aklry33 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9340 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子40 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982441 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug43 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo43 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan43 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构