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

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

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

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

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

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

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

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

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

比如，我們?cè)?el-tag 組件上添加 @click 事件監(jiān)聽器時(shí)，實(shí)際上會(huì)被綁定到內(nèi)部子元素上，而不是我們期望的 el-tag 標(biāo)簽本身。這個(gè)內(nèi)部子元素是一個(gè) <span> 元素，它包含了 el-tag 組件的全部內(nèi)容。所以當(dāng)我們點(diǎn)擊 el-tag 標(biāo)簽時(shí)，實(shí)際上是在點(diǎn)擊它內(nèi)部的 <span> 元素，而不是 el-tag 標(biāo)簽本身。因此，我們需要將 @click 事件綁定到該 <span> 元素上。
那么問題來了，怎么才能獲取到該 <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> 上。這樣一來，當(dāng)我們點(diǎn)擊 el-tag 標(biāo)簽時(shí)，就會(huì)觸發(fā)handleTagClick 方法。
上述做法將事件綁定到了組件的根元素上，可以有效地解決 el-tag 組件的點(diǎn)擊事件不被觸發(fā)的問題。

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

四、小結(jié)一下

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

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

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

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

最新評(píng)論