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()
  }
}
相关推荐
啃火龙果的兔子4 分钟前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
ttyyttemo23 分钟前
Compose生命周期---Lifecycle of composables
前端
以身入局27 分钟前
FragmentManager 之 addToBackStack 作用
前端·面试
sophie旭28 分钟前
《深入浅出react》总结之 10.7 scheduler 异步调度原理
前端·react.js·源码
练习前端两年半29 分钟前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
大胖猫L30 分钟前
深搜与广搜在 TypeScript 类型递归中的应用
前端·算法
吃饭睡觉打豆豆嘛30 分钟前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
蛋仔聊测试33 分钟前
基于 Playwright(python) 的前端性能测试脚本实现
前端·python
算了吧34 分钟前
基于vue3和koa2打造的一款企业级应用框架(建设中)-Elpis
前端·前端框架
用户758281218307335 分钟前
什么是Koa框架?
前端