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

一文詳細聊聊vue3的defineProps、defineEmits和defineExpose

 更新時間: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)新大陸一般,所以利用閑碎時間對這三個方法做個總結(jié)。

defineProps

const props = defineProps<{
   foo: String,
   bar?: Number
}>()

defineProps 是vue3的寫法并且是一個僅 <script setup> 中可用的編譯宏命令,并不需要顯式地導(dǎo)入;在vue3的非語法糖setup和在vue2中的寫法是 props 。

defineProps的大部分用法是進行父子組件傳值。

注意:defineProps() 宏中的參數(shù)不可以訪問 <script setup>中定義的其他變量,因為在編譯時整個表達式都會被移到外部的函數(shù)中。

實例:父組件傳值給子組件

父組件通過將值傳遞給子組件,子組件通過defineProps進行接收,子組件點擊后將接收到的值 alert 出來

結(jié)果:

defineEmits

const emit = defineEmits<{
(e: 'submit', num: number): void
}>()

defineEmitsdefineProps 一樣也是僅用于 <script setup> ,并且不需要導(dǎo)入;在vue3的非語法糖setup中的寫法是 emits
defineEmits 的不同點在于,組件要觸發(fā)的事件可以顯式地通過 defineEmits() 宏來聲明。

注意:如果一個原生事件的名字 (例如 click) 被定義在 emits 選項中,則監(jiān)聽器只會監(jiān)聽組件觸發(fā)的 click 事件而不會再響應(yīng)原生的 click 事件。

實例:子組件觸發(fā)父組件的的事件,并且進行傳值。

子組件通過觸發(fā)父組件的 submit 事件,并且將參數(shù)6666傳遞到父組件。

結(jié)果:

defineExpose

const isShow = ref<boo(false)
defineExpose({ // 宏來顯示指定組件中屬性暴露出去
  isShow,
});

在使用 <script setup> 的時候,組件的實例是默認關(guān)閉的不能夠通過模板引用或者$parent 進行被訪問的。

通過 defineExpose 可宏來顯式指定在 <script setup> 組件中要暴露出去的屬性。

實例:向外暴露屬性,被使用。

組件向外暴露了 isShow 屬性值,當(dāng)被點擊時可以被訪問到。

結(jié)果:

總結(jié) 

到此這篇關(guān)于vue3的defineProps、defineEmits和defineExpose的文章就介紹到這了,更多相關(guān)vue3 defineProps、defineEmits和defineExpose內(nèi)容請搜索腳本之家以前的文章或繼續(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ā)實現(xiàn)過程詳解

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

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

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

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

    Vue3實現(xiàn)列表無限滾動的示例詳解

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

    Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例

    這篇文章主要介紹了Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue項目中使用bpmn-自定義platter的示例代碼

    vue項目中使用bpmn-自定義platter的示例代碼

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

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

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

    Vue項目保存代碼之后頁面自動更新問題

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

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

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

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

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

最新評論