簡(jiǎn)介

????????Vue提供了事件綁定的語(yǔ)法糖，我們?cè)跇?biāo)簽中可直接使用形如v-on:click，@click，@focus的形式綁定事件監(jiān)聽器，并且可以使用修飾符對(duì)事件進(jìn)行option設(shè)置。本次解釋once修飾符以及native修飾符的情況。

once

????????綁定once的監(jiān)聽器只會(huì)觸發(fā)一次，在第一次觸發(fā)后該監(jiān)聽器會(huì)被remove掉。很簡(jiǎn)單不多做解釋了。

native

????????我們可以稱native為原型綁定。只有使用vue組件時(shí)我們會(huì)用到這個(gè)修飾符。當(dāng)我們?cè)诮M件上綁定監(jiān)聽時(shí)，我們綁定的是組件定義的監(jiān)聽。以element框架為例，<el-input>是element提供的組件。它在瀏覽器解析后是這樣的。我們寫<el-input @click="">時(shí)，這click綁定的是element給el-input定義的方法。我們其實(shí)把click綁定在了
div[class="el-input"]
上了。與直接在<input>上綁定是不同的，如果element沒(méi)給el-input定義click (this.$emit('click'),function)組件需要這種方式才能定義click監(jiān)聽)，那么我們這次綁定是無(wú)效的。

圖1.el-input組件標(biāo)簽

當(dāng)我們加上native詞綴，<el-input @click.native="">這樣，我們就把click事件直接綁定在了原型上了，也就是綁定在
input[class="el-input__inner"]
上了。這是我們綁定的就和input標(biāo)簽的原生監(jiān)聽器是一樣的。所以當(dāng)我們使用組件時(shí)需要經(jīng)常使用原型綁定。

前端豆知識(shí)，很小卻有用