最近在開發(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的大部分用法是進(jìn)行父子組件傳值。

注意：defineProps() 宏中的參數(shù)不可以訪問 <script setup>中定義的其他變量，因為在編譯時整個表達(dá)式都會被移到外部的函數(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() 宏來聲明。

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

實例：子組件觸發(fā)父組件的的事件，并且進(jìn)行傳值。

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

結(jié)果：

defineExpose

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

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

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

實例：向外暴露屬性，被使用。

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

結(jié)果：

總結(jié) 

到此這篇關(guān)于vue3的defineProps、defineEmits和defineExpose的文章就介紹到這了,更多相關(guān)vue3 defineProps、defineEmits和defineExpose內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論