Vue3中unref的寫法代碼示例

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

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

1. editForm

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

const editForm = ref()

2. unref

unref 是 Vue 3 提供的一個工具函數(shù)，其作用是獲取 ref 對象的值。若傳入的參數(shù)是 ref 對象，就返回其內部的值；若不是 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() 是調用組件實例上的 open 方法。一般而言，這個方法的作用是打開編輯表單，可能用于新增或者編輯操作。

完整代碼含義

unref(editForm).open() 整體的作用是獲取組件的實例，接著調用該組件實例上的 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 組件實例并調用 open 方法
  unref(editForm).open()
}
</script>

注意事項

運用 unref(editForm).open() 時，要保證 editForm 引用的組件已經掛載，并且該組件存在 open 方法，不然就會引發(fā)運行時錯誤。可以在調用前添加空值檢查，從而避免錯誤：

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

總結

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

您可能感興趣的文章:

vue3
unref

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