最近在開(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論