快捷導(dǎo)航

Vue對Element中的el-tag添加@click事件無效的解決

更新時間：2023年05月31日 11:14:57 作者：Cosolar

本文主要介紹了Vue對Element中的el-tag添加@click事件無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

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

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

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

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

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

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

三、給出解決方法

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

修改代碼如下：

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

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

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

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