Vue.js Core 30天屠龍記(第26天) | vue change事件
前面用三章的篇幅介紹Props,接著本文要來介紹組件的另一個重要的部分:事件,在Vue.js中使用v-on可以設定某事件觸發後要做的事情,而組件上的事件設定又更為彈性,可以使用開發者自訂的事件做更細部的操作,而通過事件將子組件資料傳回父組件更是開發組件中不可或缺的,現在讓我們來學習如何使用事件吧。事件命名客製的事件不會轉換名字,他會直接用原本的字串對應,因此如下面的子組件模板:子組件中觸發plusCount事件,並把count加一的結果往上拋,現在看父組件中的...
前面用三章的篇幅介紹 Props ,接著本文要來介紹組件的另一個重要的部分: 事件,在 Vue.js 中使用 v-on 可以設定某事件觸發後要做的事情,而組件上的事件設定又更為彈性,可以使用開發者自訂的事件做更細部的操作,而通過事件將子組件資料傳回父組件更是開發組件中不可或缺的,現在讓我們來學習如何使用事件吧。
事件命名客製的事件不會轉換名字,他會直接用原本的字串對應,因此如下面的子組件模板:
<button @click="$emit(plusCount, count++)">+</button>子組件中觸發 plusCount 事件,並把 count 加一的結果往上拋,現在看父組件中的設定:
<counter @plus-count="count=$event"></counter>父組件在模板上設定的事件名稱是 plus-count 這樣的 kabab-case 字串,但因為事件的名稱對應不存在任何的轉換,因此 plusCount 不會對應到 plus-count ,所以子組件拋出的 plusCount 不會觸發 plus-count 事件。
假設你今天用 @plusCount 做設定,則模板在轉換時會因為 HTML 是不分大小寫的而把事件名稱改為 pluscount ,這樣也不會監聽到 plusCount 的觸發,因此最好的方式就是都使用 kabab-case 名稱。
如下例:
<!-- 子組件模板 --> <button @click="$emit(plus-count, count++)">+</button> <!-- 父組件模板 --> <counter @plus-count="count=$event"></counter>上例才是正確的,所以在事件命名時:
$emit 的事件名稱使用 kabab-case 。 父組件上綁定的事件名稱使用 kabab-case 。組件跟 props 屬...