Vue 3中unref的写法

Vue3中unref的写法

在工作学习前端的过程中见到了这样一种写法,于是我就探究了一下

javascript 复制代码
unref(editForm).open()

1. editForm

  • editForm 是通过 ref 创建的响应式引用对象。在 Vue 3 里,ref 常被用于创建包含单个值的响应式引用,这个值可以是基础类型,也能是对象。在当前代码里,editForm 用于引用 组件实例。
javascript 复制代码
const editForm = ref()

2. unref

  • unref 是 Vue 3 提供的一个工具函数,其作用是获取 ref 对象的值。若传入的参数是 ref 对象,就返回其内部的值;若不是 ref 对象,则直接返回该参数本身。这一函数等同于 isRef(val) ? val.value : val。
javascript 复制代码
import { unref } from 'vue'

3. unref(editForm)

  • unref(editForm) 会尝试获取 editForm 这个 ref 对象的值,也就是 组件的实例。若 editForm 并非 ref 对象,就直接返回 editForm 本身。

4. .open()

  • .open() 是调用 组件实例上的 open 方法。一般而言,这个方法的作用是打开编辑表单,可能用于新增或者编辑操作。

完整代码含义

  • unref(editForm).open() 整体的作用是获取 组件的实例,接着调用该组件实例上的 open 方法,以此来打开编辑表单。

代码示例

  • 下面是一个简化示例,展示 unref(editForm).open() 的使用方式:
javascript 复制代码
<template>
  <BasePage>
    <Button @click="add">新增</Button>
    <EditForm ref="editForm" />
  </BasePage>
</template>

<script setup>
import { ref, unref } from 'vue'
import EditForm from './edit-form.vue'

const editForm = ref()

const add = () => {
  // 获取 EditForm 组件实例并调用 open 方法
  unref(editForm).open()
}
</script>

注意事项

  • 运用 unref(editForm).open() 时,要保证 editForm 引用的组件已经挂载,并且该组件存在 open 方法,不然就会引发运行时错误。可以在调用前添加空值检查,从而避免错误:
javascript 复制代码
const add = () => {
  const formInstance = unref(editForm)
  if (formInstance && typeof formInstance.open === 'function') {
    formInstance.open()
  }
}
相关推荐
胡gh4 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh4 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴4 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_4 小时前
TailWind CSS
前端·css·postcss
烛阴5 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧5 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment6 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点7 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile7 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年7 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel