Vue 3 新增 emits ,可以宣告需要傳遞到上層的事件名稱,而在 Vue2 時不需要宣告:
<template> <div> <p v-text="message" /> <button v-on:click="$emit('accepted')">OK</button> </div> </template> <script> export default { props: ['message'] } </script>
在 Vue3 要在 emits 加上 accepted,寫法與 props 宣告的方式相似 :
<template> <div> <p v-text="message" /> <button v-on:click="$emit('accepted')"> OK </button> </div> </template> <script> export default { props: ['message'], emits: ['accepted'], } </script>雖然這個變動不大,但如果元件內忘記宣告,上層會收到兩次的事件觸發,造成非預期性的事件產生。
如同 props ,事件傳遞的資料可以加上驗證 (validator)。假設有個輸入訊息的 message 會透過 Button 點擊送出,期望送出的文字至少要10個字:
<template> <div> <input v-model="message"> <button v-on:click="$emit('confirm', message)"> OK </button> </div> </template> <script> export default { emits: { confirm: message => message.length > 10, }, data() { return { message: undefined, }; }, } </script>
參考資料:https://v3.vuejs.org/guide/migration/emits-option.html