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

一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose

 更新時(shí)間:2023年02月08日 10:18:13   作者:super舒楠  
vue3官方文檔defineProps和defineEmits都是只能在scriptsetup中使用的編譯器宏,下面這篇文章主要給大家介紹了關(guān)于vue3的defineProps、defineEmits和defineExpose的相關(guān)資料,需要的朋友可以參考下

最近在開發(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
}>()

defineEmitsdefineProps 一樣也是僅用于 <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操作數(shù)組的幾種常用方法小結(jié)

    Vue操作數(shù)組的幾種常用方法小結(jié)

    本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下
    2023-09-09
  • Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解

    Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解

    這篇文章主要介紹了Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果

    Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果

    這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06
  • Vue3實(shí)現(xiàn)列表無限滾動(dòng)的示例詳解

    Vue3實(shí)現(xiàn)列表無限滾動(dòng)的示例詳解

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)列表無限滾動(dòng)的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下
    2023-07-07
  • Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例

    Vue項(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-09
  • vue項(xiàng)目中使用bpmn-自定義platter的示例代碼

    vue項(xiàng)目中使用bpmn-自定義platter的示例代碼

    這篇文章主要介紹了vue項(xiàng)目中使用bpmn-自定義platter的實(shí)例代碼,本文通過代碼截圖相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • Vue組件間通信的實(shí)現(xiàn)方法講解

    Vue組件間通信的實(shí)現(xiàn)方法講解

    組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的
    2023-01-01
  • Vue項(xiàng)目保存代碼之后頁面自動(dòng)更新問題

    Vue項(xiàng)目保存代碼之后頁面自動(dòng)更新問題

    這篇文章主要介紹了Vue項(xiàng)目保存代碼之后頁面自動(dòng)更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue-cropper 圖片裁剪的基本原理及思路講解

    Vue-cropper 圖片裁剪的基本原理及思路講解

    這篇文章主要介紹了Vue-cropper 圖片裁剪的基本原理及思路講解,本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-04-04
  • vue嵌入第三方頁面幾種常見方法

    vue嵌入第三方頁面幾種常見方法

    在Vue中嵌入第三方頁面可以采用多種方法,例如使用<iframe>、Vue插件、動(dòng)態(tài)加載第三方腳本或WebComponents,不同方法適用于不同類型的內(nèi)容和項(xiàng)目需求,如<iframe>適用于整個(gè)網(wǎng)頁,而動(dòng)態(tài)腳本和WebComponents適合特定功能,選擇合適的方法可以有效整合外部資源
    2024-09-09

最新評(píng)論