一文詳細聊聊vue3的defineProps、defineEmits和defineExpose
最近在開發(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 }>()
defineEmits
和 defineProps
一樣也是僅用于 <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項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09