欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?defineExpose的使用及應(yīng)用場景分析

 更新時間：2025年06月20日 09:46:10   作者：我在北京coding  
Vue3中defineExpose用于向父組件暴露子組件的屬性和方法,尤其在script setup語法中,需顯式聲明以實(shí)現(xiàn)組件間交互,可控制暴露內(nèi)容,避免過度暴露,同時注意響應(yīng)式數(shù)據(jù)解包與測試影響,本文給大家介紹vue3?defineExpose的使用,感興趣的朋友一起看看吧

子組件

//子組價
<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>

父組件

//父組價
<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>

簡介：

在 Vue 3 的組合式 API 中，defineExpose 是一個用于向父組件暴露內(nèi)部屬性和方法的宏。這在使用 <script setup> 語法時特別有用，因?yàn)槟J(rèn)情況下，使用 <script setup> 的組件是封閉的，即父組件無法訪問子組件的內(nèi)部狀態(tài)。通過 defineExpose，你可以選擇性地暴露需要被外部訪問的屬性或方法。

關(guān)鍵點(diǎn)說明

  • 僅暴露顯式聲明的屬性

    • 未在 defineExpose 中列出的屬性和方法對父組件不可見。
    • 例如，上面的 message 屬性未被暴露，父組件無法訪問。

  • 類型支持（TypeScript）

可以通過泛型參數(shù)為暴露的屬性和方法提供類型定義：

typescript

defineExpose<{
  count: number;
  increment: () => void;
}>();

  • 與非 <script setup> 組件的區(qū)別

    • 在普通的 export default 組件中，直接通過 this 暴露屬性和方法，無需 defineExpose。

應(yīng)用場景

  • 父組件需要控制子組件的狀態(tài)（如獲取表單組件的值、觸發(fā)子組件的動畫）。
  • 封裝可復(fù)用組件時，明確暴露可被外部調(diào)用的 API。

注意事項(xiàng)

  • 避免過度暴露：僅暴露真正需要被外部訪問的屬性和方法，保持組件的封裝性。
  • 響應(yīng)式問題：暴露的 ref 在父組件中訪問時會自動解包（即直接訪問 .value）。
  • 測試考量：過度依賴組件間的直接引用可能導(dǎo)致測試?yán)щy，優(yōu)先考慮通過事件或狀態(tài)管理共享數(shù)據(jù)。

通過 defineExpose，你可以在保持 Vue 3 組合式 API 簡潔性的同時，靈活地實(shí)現(xiàn)組件間的交互。

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

相關(guān)文章

  • Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法

    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)方法及作用詳解

    Vue作用域插槽實(shí)現(xiàn)方法及作用詳解

    這篇文章主要介紹了Vue作用域插槽實(shí)現(xiàn)方法及作用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • 使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法

    使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法

    這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-08-08
  • Vue2.0點(diǎn)擊切換類名改變樣式的方法

    Vue2.0點(diǎn)擊切換類名改變樣式的方法

    今天小編就為大家分享一篇Vue2.0點(diǎn)擊切換類名改變樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue項(xiàng)目初始化過程中錯誤總結(jié)

    vue項(xiàng)目初始化過程中錯誤總結(jié)

    在Vue.js項(xiàng)目初始化和構(gòu)建過程中,可能會遇到多種問題,首先,npm?install過程中報錯,如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時,若出現(xiàn)core-js相關(guān)錯誤
    2024-09-09
  • vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名

    vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名

    這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03
  • Vue3屬性值傳遞defineProps詳解

    Vue3屬性值傳遞defineProps詳解

    在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過簡單定義或?qū)ο蠖x,開發(fā)者可以靈活地接收并處理組件上的屬性值,簡單定義方式通過數(shù)組傳遞屬性名,而對象定義則可以約束屬性的數(shù)據(jù)類型、默認(rèn)值及是否必須傳遞等
    2024-09-09
  • vue實(shí)現(xiàn)樹狀表格效果

    vue實(shí)現(xiàn)樹狀表格效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue3實(shí)現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼

    Vue3實(shí)現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼

    虛擬滾動列表是一種優(yōu)化長列表渲染性能的技術(shù),通過只渲染可視區(qū)域內(nèi)的列表項(xiàng),減少DOM的渲染數(shù)量,本文就來介紹一下Vue3實(shí)現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2025-01-01
  • vue中使用vue-cli接入融云實(shí)現(xiàn)即時通信

    vue中使用vue-cli接入融云實(shí)現(xiàn)即時通信

    這篇文章主要介紹了vue中使用vue-cli接入融云實(shí)現(xiàn)即時通信的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-04-04

最新評論