簡(jiǎn)介
????????Vue提供了事件綁定的語(yǔ)法糖馁害,我們?cè)跇?biāo)簽中可直接使用形如v-on:click碘菜,@click限寞,@focus的形式綁定事件監(jiān)聽(tīng)器,并且可以使用修飾符對(duì)事件進(jìn)行option設(shè)置计雌。本次解釋once修飾符以及native修飾符的情況。
once
????????綁定once的監(jiān)聽(tīng)器只會(huì)觸發(fā)一次凿滤,在第一次觸發(fā)后該監(jiān)聽(tīng)器會(huì)被remove掉翁脆。很簡(jiǎn)單不多做解釋了。
native
????????我們可以稱native為原型綁定反番。只有使用vue組件時(shí)我們會(huì)用到這個(gè)修飾符罢缸。當(dāng)我們?cè)诮M件上綁定監(jiān)聽(tīng)時(shí)投队,我們綁定的是組件定義的監(jiān)聽(tīng)。以element框架為例钞螟,<el-input>是element提供的組件。它在瀏覽器解析后是這樣的。我們寫(xiě)<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)聽(tīng))藕筋,那么我們這次綁定是無(wú)效的掰茶。
當(dāng)我們加上native詞綴沪伙,<el-input @click.native="">這樣翁授,我們就把click事件直接綁定在了原型上了贮配,也就是綁定在
input[class="el-input__inner"]
上了。這是我們綁定的就和input標(biāo)簽的原生監(jiān)聽(tīng)器是一樣的。所以當(dāng)我們使用組件時(shí)需要經(jīng)常使用原型綁定。