我今天又犯了同樣的錯(cuò)誤，雖然知道Vue對(duì)Element中的el-tag添加@click事件無(wú)效,但是又忘記了，開(kāi)始各種搜索，找到原因，通過(guò)查閱資料發(fā)現(xiàn)官方給定了解答。寫(xiě)個(gè)小筆記吧，免得以后不長(zhǎng)心。
其實(shí)我們?cè)赩ue和Element組件庫(kù)的日常開(kāi)發(fā)中，時(shí)常遇到需要給組件添加事件響應(yīng)的場(chǎng)景。無(wú)論是在Vue單文件組件（Single-file-components）中，還是在使用Element UI組件庫(kù)開(kāi)發(fā)界面時(shí)，都會(huì)遇到為組件添加點(diǎn)擊事件響應(yīng)的需求。

在使用Vue+Element開(kāi)發(fā)時(shí)，我們很容易會(huì)遇到這樣的問(wèn)題，就是 @click 事件沒(méi)有被觸發(fā)。下面我們一起探究一下這個(gè)問(wèn)題的產(chǎn)生原因以及解決方法。

一、問(wèn)題的發(fā)現(xiàn)

在使用Element UI組件庫(kù)時(shí)，我們有時(shí)會(huì)需要給 el-tag 標(biāo)簽添加 @click 的點(diǎn)擊事件響應(yīng)，但是當(dāng)我們嘗試這樣做時(shí)，發(fā)現(xiàn)點(diǎn)擊事件根本沒(méi)有被觸發(fā)。

<el-tag @click="handleTagClick">標(biāo)簽</el-tag>

export default {
  methods: {
    handleTagClick() {
      console.log('tag clicked');
    }
  }
}

上面這段代碼看起來(lái)應(yīng)該沒(méi)有任何問(wèn)題，但是實(shí)際運(yùn)行時(shí)卻發(fā)現(xiàn)點(diǎn)擊事件并沒(méi)有生效。
那么，這個(gè)問(wèn)題是怎么產(chǎn)生的呢？

二、問(wèn)題產(chǎn)生的原因

Vue對(duì)事件的定義是通過(guò) $on 方法來(lái)注冊(cè)的，而Element組件庫(kù)中的大部分組件都是由多個(gè)子組件組成的，這也就導(dǎo)致了在某些組件上添加事件監(jiān)聽(tīng)器時(shí)，可能并不是我們期望的元素上被綁定了相應(yīng)的事件。

比如，我們?cè)?el-tag 組件上添加 @click 事件監(jiān)聽(tīng)器時(shí)，實(shí)際上會(huì)被綁定到內(nèi)部子元素上，而不是我們期望的 el-tag 標(biāo)簽本身。這個(gè)內(nèi)部子元素是一個(gè) <span> 元素，它包含了 el-tag 組件的全部?jī)?nèi)容。所以當(dāng)我們點(diǎn)擊 el-tag 標(biāo)簽時(shí)，實(shí)際上是在點(diǎn)擊它內(nèi)部的 <span> 元素，而不是 el-tag 標(biāo)簽本身。因此，我們需要將 @click 事件綁定到該 <span> 元素上。
那么問(wèn)題來(lái)了，怎么才能獲取到該 <span> 元素呢？

三、給出解決方法

Vue提供了一種特殊的修飾符 .native ，可以讓我們將事件綁定到組件的根元素上。

修改代碼如下：

<el-tag v-on:click.native="handleTagClick">標(biāo)簽</el-tag>

export default {
  methods: {
    handleTagClick() {
      console.log('tag clicked');
    }
  }
}

我們使用 .native 修飾符，將點(diǎn)擊事件綁定到了 el-tag 組件的根元素上，即該組件內(nèi)部的第一個(gè)元素 <span> 上。這樣一來(lái)，當(dāng)我們點(diǎn)擊 el-tag 標(biāo)簽時(shí)，就會(huì)觸發(fā)handleTagClick 方法。
上述做法將事件綁定到了組件的根元素上，可以有效地解決 el-tag 組件的點(diǎn)擊事件不被觸發(fā)的問(wèn)題。

除了使用 .native 修飾符之外，還有其他一些方法可以解決 el-tag 組件的點(diǎn)擊事件無(wú)效的問(wèn)題。例如，我們可以通過(guò)在 mounted 周期鉤子函數(shù)中獲取該 <span> 元素，然后手動(dòng)給它添加 click 事件。不過(guò)相對(duì)來(lái)說(shuō)這種方法比較繁瑣，不太建議使用。

四、小結(jié)一下

以上就是關(guān)于 Vue 對(duì) Element 中的 el-tag 添加 @click 事件無(wú)效的問(wèn)題的詳細(xì)解決方案，通過(guò)使用 .native 修飾符可以輕松解決這個(gè)問(wèn)題。

但需要注意的是，.native 修飾符只對(duì)原生的 HTML 元素才有效，而對(duì)于自定義組件則無(wú)效。

同時(shí)，在實(shí)際開(kāi)發(fā)中，我們還需要根據(jù)需求選擇合適的方式來(lái)為組件添加事件響應(yīng)。

到此這篇關(guān)于Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決的文章就介紹到這了,更多相關(guān)Element el-tag添加@click事件無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論