Vue 模組自定義事件(Custom Events) | Vue component vbind
每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了XD。因自定義事件的名稱跟模組名稱和props命名不同,在使用時並不會有轉換的問題,所以怎麼命名就怎麼使用,命名用myCustomEvent,使用時也必須使用v-on:myCustomEvent,這時用v-on:my-custom-event是無效的。在HTML中使用時,為了要遵守HTML的規範,所以自定義事件(CustomEvents)名會被轉換成小寫,也因此在HTML中使用v-on:myCustomEvent時,會自動轉換成v-on:mycustomevent,最後會因為事件名稱不相同(myCustomEvent!=mycu...
每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了 XD 。
因自定義事件的名稱跟模組名稱和 props 命名不同,在使用時並不會有轉換的問題,所以怎麼命名就怎麼使用,命名用 myCustomEvent ,使用時也必須使用 v-on:myCustomEvent ,這時用 v-on:my-custom-event 是無效的。
在 HTML 中使用時,為了要遵守 HTML 的規範,所以自定義事件( Custom Events )名會被轉換成小寫,也因此在 HTML 中使用 v-on:myCustomEvent 時,會自動轉換成 v-on:mycustomevent ,最後會因為事件名稱不相同(myCustomEvent != mycustomevent)而導致該監聽器無法作用。
因此 Vue 文件建議在一律以 kebab-case (短橫線分隔)來命名自定義事件( Custom Events )。
在講自定義事件的 v-model 前,先來了解一下 v-model 是如何產生作用的。
如果對 v-model 不太熟悉,可以先參考DAY09 | 跟 Vue.js 認識的30天 - Vue 的資料雙向綁定(v-model)[1]。
在一般情況下,我們想要雙向綁定就會使用 v-model ,如下:
<input type="text" v-model="name"><input> 的 value 值會受 Vue 實例資料 name 的影響,而 name 也同樣受到 <input> 的 value 改變的影響。
但 v-model 是如何達到雙向綁定的,其實就是透過 v-bind:value 跟 v-on:input
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value">也就是說 v-model 做了2件事: