一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
最近在開發(fā)中用到了vue3的defineProps、defineEmits和defineExpose,感覺發(fā)現(xiàn)新大陸一般,所以利用閑碎時(shí)間對(duì)這三個(gè)方法做個(gè)總結(jié)。
defineProps
const props = defineProps<{ foo: String, bar?: Number }>()
defineProps
是vue3的寫法并且是一個(gè)僅 <script setup>
中可用的編譯宏命令,并不需要顯式地導(dǎo)入;在vue3的非語法糖setup和在vue2中的寫法是 props
。
defineProps
的大部分用法是進(jìn)行父子組件傳值。
注意:defineProps() 宏中的參數(shù)不可以訪問
<script setup>
中定義的其他變量,因?yàn)樵诰幾g時(shí)整個(gè)表達(dá)式都會(huì)被移到外部的函數(shù)中。
實(shí)例:父組件傳值給子組件
父組件通過將值傳遞給子組件,子組件通過defineProps
進(jìn)行接收,子組件點(diǎn)擊后將接收到的值 alert 出來
結(jié)果:
defineEmits
const emit = defineEmits<{ (e: 'submit', num: number): void }>()
defineEmits
和 defineProps
一樣也是僅用于 <script setup>
,并且不需要導(dǎo)入;在vue3的非語法糖setup中的寫法是 emits
。defineEmits
的不同點(diǎn)在于,組件要觸發(fā)的事件可以顯式地通過 defineEmits() 宏來聲明。
注意:如果一個(gè)原生事件的名字 (例如 click) 被定義在 emits 選項(xiàng)中,則監(jiān)聽器只會(huì)監(jiān)聽組件觸發(fā)的 click 事件而不會(huì)再響應(yīng)原生的 click 事件。
實(shí)例:子組件觸發(fā)父組件的的事件,并且進(jìn)行傳值。
子組件通過觸發(fā)父組件的 submit 事件,并且將參數(shù)6666傳遞到父組件。
結(jié)果:
defineExpose
const isShow = ref<boo(false) defineExpose({ // 宏來顯示指定組件中屬性暴露出去 isShow, });
在使用 <script setup>
的時(shí)候,組件的實(shí)例是默認(rèn)關(guān)閉的不能夠通過模板引用或者$parent
進(jìn)行被訪問的。
通過 defineExpose 可宏來顯式指定在
<script setup>
組件中要暴露出去的屬性。
實(shí)例:向外暴露屬性,被使用。
組件向外暴露了 isShow 屬性值,當(dāng)被點(diǎn)擊時(shí)可以被訪問到。
結(jié)果:
總結(jié)
到此這篇關(guān)于vue3的defineProps、defineEmits和defineExpose的文章就介紹到這了,更多相關(guān)vue3 defineProps、defineEmits和defineExpose內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解
這篇文章主要介紹了Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06Vue3實(shí)現(xiàn)列表無限滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)列表無限滾動(dòng)的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue項(xiàng)目中使用bpmn-自定義platter的示例代碼
這篇文章主要介紹了vue項(xiàng)目中使用bpmn-自定義platter的實(shí)例代碼,本文通過代碼截圖相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05Vue項(xiàng)目保存代碼之后頁面自動(dòng)更新問題
這篇文章主要介紹了Vue項(xiàng)目保存代碼之后頁面自動(dòng)更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10