一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
最近在開(kāi)發(fā)中用到了vue3的defineProps、defineEmits和defineExpose，感覺(jué)發(fā)現(xiàn)新大陸一般，所以利用閑碎時(shí)間對(duì)這三個(gè)方法做個(gè)總結(jié)。
defineProps
const props = defineProps<{
foo: String,
bar?: Number
}>()
defineProps 是vue3的寫(xiě)法并且是一個(gè)僅 <script setup> 中可用的編譯宏命令，并不需要顯式地導(dǎo)入；在vue3的非語(yǔ)法糖setup和在vue2中的寫(xiě)法是 props 。
defineProps的大部分用法是進(jìn)行父子組件傳值。
注意：defineProps() 宏中的參數(shù)不可以訪問(wèn)
<script setup>中定義的其他變量，因?yàn)樵诰幾g時(shí)整個(gè)表達(dá)式都會(huì)被移到外部的函數(shù)中。
實(shí)例：父組件傳值給子組件
父組件通過(guò)將值傳遞給子組件，子組件通過(guò)defineProps進(jìn)行接收，子組件點(diǎn)擊后將接收到的值 alert 出來(lái)
結(jié)果：
defineEmits
const emit = defineEmits<{
(e: 'submit', num: number): void
}>()
defineEmits 和 defineProps 一樣也是僅用于 <script setup> ，并且不需要導(dǎo)入；在vue3的非語(yǔ)法糖setup中的寫(xiě)法是 emits 。defineEmits 的不同點(diǎn)在于，組件要觸發(fā)的事件可以顯式地通過(guò) defineEmits() 宏來(lái)聲明。
注意：如果一個(gè)原生事件的名字 (例如 click) 被定義在 emits 選項(xiàng)中，則監(jiān)聽(tīng)器只會(huì)監(jiān)聽(tīng)組件觸發(fā)的 click 事件而不會(huì)再響應(yīng)原生的 click 事件。
實(shí)例：子組件觸發(fā)父組件的的事件，并且進(jìn)行傳值。
子組件通過(guò)觸發(fā)父組件的 submit 事件，并且將參數(shù)6666傳遞到父組件。
結(jié)果：
defineExpose
const isShow = ref<boo(false)
defineExpose({ // 宏來(lái)顯示指定組件中屬性暴露出去
isShow,
});
在使用 <script setup> 的時(shí)候，組件的實(shí)例是默認(rèn)關(guān)閉的不能夠通過(guò)模板引用或者$parent 進(jìn)行被訪問(wèn)的。
通過(guò) defineExpose 可宏來(lái)顯式指定在
<script setup>組件中要暴露出去的屬性。
實(shí)例：向外暴露屬性，被使用。
組件向外暴露了 isShow 屬性值，當(dāng)被點(diǎn)擊時(shí)可以被訪問(wèn)到。
結(jié)果：
總結(jié)
到此這篇關(guān)于vue3的defineProps、defineEmits和defineExpose的文章就介紹到這了,更多相關(guān)vue3 defineProps、defineEmits和defineExpose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解處理Vue單頁(yè)面應(yīng)用SEO的另一種思路
這篇文章主要介紹了詳解處理Vue單頁(yè)面應(yīng)用SEO的另一種思路，本文主要針對(duì) vue 2.0 單頁(yè)面 Meta SEO 優(yōu)化展開(kāi)介紹，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了跟混亂的頁(yè)面彈窗說(shuō)再見(jiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
之前關(guān)于vsCode一鍵生成vue模，最近需要回顧，就順便發(fā)到隨筆上了，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue2路由跳轉(zhuǎn)傳參中文問(wèn)題處理方案
在el-table中的記錄列表中放置了一個(gè) 操作按鈕,點(diǎn)這個(gè)按鈕時(shí)可以新增一個(gè)tab頁(yè)簽,并將通過(guò)路由傳參方式將一些信息傳遞到新打開(kāi)的tab頁(yè)簽中,但發(fā)現(xiàn)傳遞中文參數(shù)時(shí)會(huì)出現(xiàn)報(bào)錯(cuò),所以本文給大家介紹了Vue2路由跳轉(zhuǎn)傳參中文問(wèn)題處理方案,需要的朋友可以參考下2024-05-05
el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級(jí)別
文章介紹了如何使用el-date-picker 組件來(lái)限制用戶選擇的時(shí)間,禁止選擇當(dāng)前時(shí)間的日期及時(shí)分,同時(shí)允許選擇其他日期的全天時(shí)分,通過(guò)設(shè)置 `pickerOptions` 對(duì)象的屬性,可以實(shí)現(xiàn)對(duì)日期和時(shí)間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
無(wú)論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁(yè)面開(kāi)發(fā)過(guò)程中，將一個(gè)頁(yè)面劃分成一個(gè)個(gè)小的模塊，每個(gè)模塊單獨(dú)定義，每個(gè)模塊就是一個(gè)組件。組件可以進(jìn)行復(fù)用，A頁(yè)面和B頁(yè)面有一個(gè)相似的模塊，可以抽離成一個(gè)可局部修改的組件。2021-05-05
打開(kāi)尤大大的GitHub，發(fā)現(xiàn)多了個(gè)叫 petite-vue 的東西,Vue3 和 Vite 還沒(méi)學(xué)完呢，又開(kāi)始整新東西了？本文就來(lái)介紹一下2021-07-07
vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實(shí)現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫(kù)進(jìn)行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫(kù)進(jìn)行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
Element中使用ECharts的項(xiàng)目實(shí)踐
本文主要介紹了Element中使用ECharts的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07