快捷導(dǎo)航

Vue3中unref的寫法代碼示例

更新時(shí)間：2025年06月18日 09:07:42 作者：唐人街都是苦瓜臉

Vue3中多種響應(yīng)式實(shí)現(xiàn)方式,包括ref、unref、isRef、reactive等,這篇文章主要介紹了Vue3中unref寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. editForm

editForm 是通過 ref 創(chuàng)建的響應(yīng)式引用對(duì)象。在 Vue 3 里，ref 常被用于創(chuàng)建包含單個(gè)值的響應(yīng)式引用，這個(gè)值可以是基礎(chǔ)類型，也能是對(duì)象。在當(dāng)前代碼里，editForm 用于引用組件實(shí)例。

const editForm = ref()

2. unref

unref 是 Vue 3 提供的一個(gè)工具函數(shù)，其作用是獲取 ref 對(duì)象的值。若傳入的參數(shù)是 ref 對(duì)象，就返回其內(nèi)部的值；若不是 ref 對(duì)象，則直接返回該參數(shù)本身。這一函數(shù)等同于 isRef(val) ? val.value : val。

import { unref } from 'vue'

3. unref(editForm)

unref(editForm) 會(huì)嘗試獲取 editForm 這個(gè) ref 對(duì)象的值，也就是組件的實(shí)例。若 editForm 并非 ref 對(duì)象，就直接返回 editForm 本身。

4. .open()

.open() 是調(diào)用組件實(shí)例上的 open 方法。一般而言，這個(gè)方法的作用是打開編輯表單，可能用于新增或者編輯操作。

完整代碼含義

unref(editForm).open() 整體的作用是獲取組件的實(shí)例，接著調(diào)用該組件實(shí)例上的 open 方法，以此來(lái)打開編輯表單。

代碼示例

下面是一個(gè)簡(jiǎn)化示例，展示 unref(editForm).open() 的使用方式：

<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 組件實(shí)例并調(diào)用 open 方法
  unref(editForm).open()
}
</script>

注意事項(xiàng)

運(yùn)用 unref(editForm).open() 時(shí)，要保證 editForm 引用的組件已經(jīng)掛載，并且該組件存在 open 方法，不然就會(huì)引發(fā)運(yùn)行時(shí)錯(cuò)誤?？梢栽谡{(diào)用前添加空值檢查，從而避免錯(cuò)誤：

const add = () => {
  const formInstance = unref(editForm)
  if (formInstance && typeof formInstance.open === 'function') {
    formInstance.open()
  }
}

總結(jié)

到此這篇關(guān)于Vue3中unref寫法的文章就介紹到這了,更多相關(guān)Vue3中unref寫法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
unref

相關(guān)文章

解決vue cli使用typescript后打包巨慢的問題
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue+node實(shí)現(xiàn)音頻錄制播放功能
這篇文章主要介紹了Vue+node實(shí)現(xiàn)音頻錄制播放,功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
idea編譯器vue縮進(jìn)報(bào)錯(cuò)問題場(chǎng)景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò)，怎么解決呢，很多朋友遇到這個(gè)問題都很棘手，不知該如何解決，今天小編給大家通過場(chǎng)景分析介紹解決方案，需要的朋友參考下吧
2021-07-07
Vue.js鼠標(biāo)懸浮更換圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局
這篇文章主要介紹了Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局，工作中難免遇到需要對(duì)頁(yè)面布局進(jìn)行拖拽然后改變布局，保存布局，下面文章就圍繞Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
如何在vue中使用HTML 5 拖放API
這篇文章主要介紹了如何在vue中使用HTML 5 拖放API，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-05-05
Vue?PC前端掃碼登錄功能實(shí)現(xiàn)
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實(shí)現(xiàn)過程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
vue router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用詳解
導(dǎo)航守衛(wèi)主要用來(lái)通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-08-08