快捷導(dǎo)航

Vue3中unref的寫法代碼示例

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

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

1. editForm

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

const editForm = ref()

2. unref

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

import { unref } from 'vue'

3. unref(editForm)

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

4. .open()

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

完整代碼含義

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

代碼示例

下面是一個簡化示例，展示 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 組件實例并調(diào)用 open 方法
  unref(editForm).open()
}
</script>

注意事項

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

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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
unref

相關(guān)文章

vue教程之toast彈框全局調(diào)用示例詳解
這篇文章主要為大家詳細(xì)介紹了vue教程之toast彈框全局調(diào)用示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
詳解vue-cli項目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項目中的proxyTable跨域問題小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Vue-resource實現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
vue點擊按鈕實現(xiàn)簡單頁面的切換
這篇文章主要為大家詳細(xì)介紹了vue點擊按鈕實現(xiàn)簡單頁面的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
基于Vue?+?Node.js自動發(fā)布服務(wù)腳本的完整流程
在當(dāng)今快節(jié)奏的軟件開發(fā)環(huán)境中,前端項目的快速迭代與高效部署成為了提升競爭力的關(guān)鍵,這篇文章主要介紹了基于Vue+Node.js自動發(fā)布服務(wù)腳本的完整流程,需要的朋友可以參考下
2026-03-03
vue項目打包部署_nginx代理訪問方法詳解
今天小編就為大家分享一篇vue項目打包部署_nginx代理訪問方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue如何進(jìn)行數(shù)據(jù)代理
這篇文章主要介紹了vue如何進(jìn)行數(shù)據(jù)代理,通過本文學(xué)習(xí)我們了解如何代理的及驗證兩條線的問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
通過GASP讓vue實現(xiàn)動態(tài)效果實例代碼詳解
GASP是一個JavaScript動畫庫，它支持快速開發(fā)高性能的 Web 動畫。GASP 使我們能夠輕松輕松快速的將動畫串在一起，來創(chuàng)造一個高內(nèi)聚的流暢動畫序列。這篇文章主要介紹了通過GASP讓vue實現(xiàn)動態(tài)效果,需要的朋友可以參考下
2019-11-11
解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?s
這篇文章主要給大家介紹了關(guān)于如何解決Vue2?axios發(fā)請求報400錯誤"Error:?Request?failed?with?status?code?400"的相關(guān)資料,在Vue應(yīng)用程序中我們通常會使用axios作為網(wǎng)絡(luò)請求庫,需要的朋友可以參考下
2023-07-07