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()
  }
}
相关推荐
csgo打的菜又爱玩2 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
ding_zhikai3 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion Web UI
前端·ubuntu·stable diffusion
gerrgwg5 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友6 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ7 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者7 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了7 小时前
自定义脚手架
前端·javascript
星晨雪海8 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6668 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js