vue3?defineExpose的使用及應(yīng)用場(chǎng)景分析
子組件
//子組價(jià)
<template>
<view class="box">子組件num值：{{num}}</view>
</template>
<script setup>
import {ref} from "vue";
const num=ref(100);
const fn = ()=>{
console.log('我是方法');
}
defineExpose({
num,
fn
})
</script>父組件
//父組價(jià)
<template>
<view>
<child-defineExpose ref="child"></child-defineExpose>
</view>
</template>
<script setup>
import {onMounted, ref} from "vue";
const child=ref(null);
onMounted(()=>{
console.log(child.value.num,child.value.fn())
})
</script>簡(jiǎn)介：
在 Vue 3 的組合式 API 中，defineExpose 是一個(gè)用于向父組件暴露內(nèi)部屬性和方法的宏。這在使用 <script setup> 語(yǔ)法時(shí)特別有用，因?yàn)槟J(rèn)情況下，使用 <script setup> 的組件是封閉的，即父組件無(wú)法訪問(wèn)子組件的內(nèi)部狀態(tài)。通過(guò) defineExpose，你可以選擇性地暴露需要被外部訪問(wèn)的屬性或方法。
關(guān)鍵點(diǎn)說(shuō)明
僅暴露顯式聲明的屬性
- 未在
defineExpose中列出的屬性和方法對(duì)父組件不可見(jiàn)。 - 例如，上面的
message屬性未被暴露，父組件無(wú)法訪問(wèn)。
- 未在
類(lèi)型支持（TypeScript）
可以通過(guò)泛型參數(shù)為暴露的屬性和方法提供類(lèi)型定義：
typescript
defineExpose<{
count: number;
increment: () => void;
}>();與非
<script setup>組件的區(qū)別- 在普通的
export default組件中，直接通過(guò)this暴露屬性和方法，無(wú)需defineExpose。
- 在普通的
應(yīng)用場(chǎng)景
- 父組件需要控制子組件的狀態(tài)（如獲取表單組件的值、觸發(fā)子組件的動(dòng)畫(huà)）。
- 封裝可復(fù)用組件時(shí)，明確暴露可被外部調(diào)用的 API。
注意事項(xiàng)
- 避免過(guò)度暴露：僅暴露真正需要被外部訪問(wèn)的屬性和方法，保持組件的封裝性。
- 響應(yīng)式問(wèn)題：暴露的
ref在父組件中訪問(wèn)時(shí)會(huì)自動(dòng)解包（即直接訪問(wèn).value）。 - 測(cè)試考量：過(guò)度依賴(lài)組件間的直接引用可能導(dǎo)致測(cè)試?yán)щy，優(yōu)先考慮通過(guò)事件或狀態(tài)管理共享數(shù)據(jù)。
通過(guò) defineExpose，你可以在保持 Vue 3 組合式 API 簡(jiǎn)潔性的同時(shí)，靈活地實(shí)現(xiàn)組件間的交互。
到此這篇關(guān)于vue3 defineExpose的使用的文章就介紹到這了,更多相關(guān)vue3 defineExpose使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue作用域插槽實(shí)現(xiàn)方法及作用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題及解決方法
這篇文章主要介紹了使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Vue2.0點(diǎn)擊切換類(lèi)名改變樣式的方法
今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類(lèi)名改變樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue項(xiàng)目初始化過(guò)程中錯(cuò)誤總結(jié)
在Vue.js項(xiàng)目初始化和構(gòu)建過(guò)程中,可能會(huì)遇到多種問(wèn)題,首先,npm?install過(guò)程中報(bào)錯(cuò),如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時(shí),若出現(xiàn)core-js相關(guān)錯(cuò)誤2024-09-09
vue 使用 canvas 實(shí)現(xiàn)手寫(xiě)電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫(xiě)電子簽名功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過(guò)簡(jiǎn)單定義或?qū)ο蠖x,開(kāi)發(fā)者可以靈活地接收并處理組件上的屬性值,簡(jiǎn)單定義方式通過(guò)數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類(lèi)型、默認(rèn)值及是否必須傳遞等2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue3實(shí)現(xiàn)動(dòng)態(tài)高度的虛擬滾動(dòng)列表的示例代碼
虛擬滾動(dòng)列表是一種優(yōu)化長(zhǎng)列表渲染性能的技術(shù),通過(guò)只渲染可視區(qū)域內(nèi)的列表項(xiàng),減少DOM的渲染數(shù)量,本文就來(lái)介紹一下Vue3實(shí)現(xiàn)動(dòng)態(tài)高度的虛擬滾動(dòng)列表的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信
這篇文章主要介紹了vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04