Vue3 事件名稱大小寫轉換機制
子元件這樣送出事件： this.$emit('changeSource') 父元件卻這樣接： <MyComponent @change-source="onChangeSource" /> 然後，竟然可以正常運作。 這篇文章會完整拆解 Vue 3 的事件名稱大小寫轉換機制，並對照 Vue 2 的差異，最後給出團隊可落地的命名與 lint 建議。 先講結論 在 Vue 3 ， emit('changeSource') 與 @change-source 可以互相對應，這是官方支援行為。[1] 在 Vue 2 ，官方文件明確說明自訂事件名稱不會自動做大小寫轉換；若命名不一致會監聽不到。[2] 即使在 Vue 3，官方仍建議在 template 裡使用 kebab-case 事件名稱，以維持一致性與可讀性。[1] Vue 2 與 Vue 3 差在哪裡？ Vue 2：名稱必須精準匹配 Vue 2 文件指出，自訂事件名稱不會像 component / prop 一樣做自動大小寫轉換；如果你 emit myEvent ，監聽 my-event 通常不會生效。[2] 此外，Vue 2 文件也提到：在 DOM template 情境下，HTML attribute 名稱不分大小寫，可能導致大小寫事件名更容易踩雷，因此建議使用 kebab-case。[2] Vue 3：camelCase 與 kebab-case 可對應 Vue 3 官方文件在 Component Events 明確示範：子元件 emit camelCase 事件時，父元件可用 kebab-case 監聽，且官方建議 template 使用 kebab-case 保持一致。[1] 這個設計把事件命名行為往 props 的使用體驗靠攏，減少因大小寫不一致造成的溝通與維護成本。 實作範例（Vue 3） 子元件 <script setup> const emit = defineEmits(['changeSource']) function updateSource() { emit('changeSource', { from: 'A', to:...