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)。
- 未在
類型支持（TypeScript）
可以通過(guò)泛型參數(shù)為暴露的屬性和方法提供類型定義：
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ò)度依賴組件間的直接引用可能導(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中使用AJAX實(shí)現(xiàn)讀取來(lái)自XML文件的信息
這篇文章主要為大家詳細(xì)介紹了vue中如何使用AJAX實(shí)現(xiàn)讀取來(lái)自XML文件的信息,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下2023-12-12
這篇文章主要介紹了vue3之向echarts組件傳值的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?圖片監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能(實(shí)現(xiàn)思路)
其實(shí)想要實(shí)現(xiàn)功能很簡(jiǎn)單，就是在一張圖片上監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)的事件，然后根據(jù)上滾還是下滾實(shí)現(xiàn)圖片的縮放，這篇文章主要介紹了Vue?實(shí)現(xiàn)圖片監(jiān)聽(tīng)鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能,需要的朋友可以參考下2023-03-03
Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼
這篇文章主要介紹了Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果，剛開(kāi)始接到這個(gè)項(xiàng)目還真是懵了，后來(lái)發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的，下面小編給大家?guī)?lái)了vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過(guò)performance.now()獲取動(dòng)畫(huà)的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫(huà),結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
vue 在服務(wù)器端直接修改請(qǐng)求的接口地址
這篇文章主要介紹了vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼
分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開(kāi)發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫(xiě)出的分頁(yè)組件,需要的朋友可以參考下2023-08-08