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()
  }
}
相关推荐
一 乐7 分钟前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再20 分钟前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
IT_陈寒22 分钟前
Vite 3.0终极提速指南:5个鲜为人知的配置技巧让构建效率翻倍
前端·人工智能·后端
菩提树下的凡夫34 分钟前
前端vue的开发流程
前端·javascript·vue.js
青山的青衫38 分钟前
【用homebrew配置nginx+配置前端项目与后端联调】Macbook M1(附一些homebrew操作)
运维·前端·nginx
二十雨辰41 分钟前
[作品集]-容易宝
java·开发语言·前端
Zz燕1 小时前
G6实战_手把手实现简单流程图
javascript·vue.js
恋猫de小郭1 小时前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
Asort1 小时前
JavaScript设计模式(二十一)——策略模式:灵活算法的艺术与实战
前端·javascript·设计模式
黑云压城After1 小时前
3D魔方-Css实现方法
前端·css·3d