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> 组件的实例。

相关推荐
小墨宝20 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED35 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿40 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子40 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架