簡介
????????Vue提供了事件綁定的語法糖,我們在標簽中可直接使用形如v-on:click,@click,@focus的形式綁定事件監聽器,并且可以使用修飾符對事件進行option設置。本次解釋once修飾符以及native修飾符的情況。
once
????????綁定once的監聽器只會觸發一次,在第一次觸發后該監聽器會被remove掉。很簡單不多做解釋了。
native
????????我們可以稱native為原型綁定。只有使用vue組件時我們會用到這個修飾符。當我們在組件上綁定監聽時,我們綁定的是組件定義的監聽。以element框架為例,<el-input>是element提供的組件。它在瀏覽器解析后是這樣的。我們寫<el-input @click="">時,這click綁定的是element給el-input定義的方法。我們其實把click綁定在了
div[class="el-input"]
上了。與直接在<input>上綁定是不同的,如果element沒給el-input定義click (this.$emit('click'),function)組件需要這種方式才能定義click監聽),那么我們這次綁定是無效的。
圖1.el-input組件標簽
當我們加上native詞綴,<el-input @click.native="">這樣,我們就把click事件直接綁定在了原型上了,也就是綁定在
input[class="el-input__inner"]
上了。這是我們綁定的就和input標簽的原生監聽器是一樣的。所以當我們使用組件時需要經常使用原型綁定。