vue v-on 觸發事件

處理組件觸發各種行為

索引index

基本用法

修飾符

自訂event: $emit()

基本用法

<button v-on:click="triggerThis"></button>
// 2.6.0+, dynamic event
<button v-on:[event]="triggerThis"></button>
// shorhand縮寫
<button @click="triggerThis"></button>
//inline, and you can pass native event as $event
<button @click="triggerThisWithParams('Hi', $event)"></button>

修飾符(Modifier)

基本用法，以「.」連接直接加在event後面

<button v-on:click.stop="doSomething"></button>

可以連鎖使用

<button v-on:click.stop.prevent="doSomething"></button>

一般修飾符

.stop // 等同 e.stopPropagation() in js
.prevent // 等同 e.preventDefault() in js
.capture 
// 等同addEventListener的capture mode, see https://javascript.info/bubbling-and-capturing for capture mode
.self // 只會在e.target 跟元素本身一樣時才觸發
.once // 只會觸發一次
.passive 
// 等同addEventListener的 passive option, 不會觸發 e.preventDefault()

KeyCode修飾符

// 直接用keyCode碼
<input v-on:keyup:13="enterToSubmit"> // keyCode: 13
// 用現成的keyCode
.enter
.tab
.delete // “Delete” 和 “Backspace”都會觸發
.esc
.space
.up
.down
.left
.right
<div v-on:keyup.esc="closePopup"></div> // example

系統KeyCode修飾符

.ctrl
.alt
.shift
.meta //command key in Mac, window key in windows

.exact：只有在完全符合的時候才會觸發事件

<button @click.ctrl.exact="onCtrlClick">Click</button>
<button @click.exact="onClickWithNoOtherModifier">Click</button>

滑鼠修飾符

.left // 左鍵
.right // 右鍵
.middle // 中鍵

自訂event: $emit()

當父組件和子組件之間需要事件的傳遞，這時候自訂event就派上用場了

// 子組件: EditContent
<div>
  // ...
  <button @click="$emit('confirmEdit')"></button>
</div>
// 父組件
<div>
  <EditContent @confirEdit="handleConfirm" />
</div>

子組件傳遞參數，$emit()的第二個參數會被傳遞至父組件

// 子組件
<button @click="$emit('addCount', 1)">
</button>
// 父組件
<AddButton @addCount="count += $event"> // $event: 1
</AddButton>
// 可以將function移至methods中
<AddButton @addCount="handleAddCount">
</AddButton>
({
  methods: {
    handleAddCount(count) { this.count += count; }
  }
})

v-model = v-bind + v-on

一般component直接使用v-model

<input v-model="productSearchText" />
  
// 等同於
<input 
  :value="productSearchText" 
  @input="productSearchText = $event.target.value" 
/>

自訂component使用時

<SearchBar v-model="productSearchText" />
  
// 自訂組件 SearchBar component
<input 
  :value="value" 
  @input="$emit('input', $event.target.value)" // 傳遞事件給父組件來觸發
/>

參考/引用

v-on: https://vuejs.org/v2/api/#v-on

child component events: https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events