我今天又犯了同樣的錯誤，雖然知道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 標簽添加 @click 的點擊事件響應(yīng)，但是當(dāng)我們嘗試這樣做時，發(fā)現(xiàn)點擊事件根本沒有被觸發(fā)。

<el-tag @click="handleTagClick">標簽</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 標簽本身。這個內(nèi)部子元素是一個 <span> 元素，它包含了 el-tag 組件的全部內(nèi)容。所以當(dāng)我們點擊 el-tag 標簽時，實際上是在點擊它內(nèi)部的 <span> 元素，而不是 el-tag 標簽本身。因此，我們需要將 @click 事件綁定到該 <span> 元素上。
那么問題來了，怎么才能獲取到該 <span> 元素呢？

三、給出解決方法

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

修改代碼如下：

<el-tag v-on:click.native="handleTagClick">標簽</el-tag>

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

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

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

四、小結(jié)一下

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

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

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

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

最新評論