ElementUI中el-dropdown-item點擊事件無效怎么解決

這篇文章主要講解了“ElementUI中el-dropdown-item點擊事件無效怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“ElementUI中el-dropdown-item點擊事件無效怎么解決”吧！

ElementUI中el-dropdown-item點擊事件無效

若直接在el-dropdown-item上添加click事件，點擊后沒有任何反應。

在click后添加native修飾符，則可解決問題。

代碼如下：

<el-dropdown>
    <span class="user"></span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="changePassword">修改密碼</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

在給Vue組件（el-dropdown-item就是一個組件）綁定事件的時候，必須加上navtive修飾符才能生效，navtive可以監聽根元素的原生事件

el-dropdown-item添加點擊事件

問題

Vue引入Element-ui框架，使用其DropDown組件時，發現官網教程并沒有給出el-dropdown-item點擊事件的使用方法。

因此需要自定義點擊事件，也就是需要添加原生的點擊事件。

添加點擊事件

使用 @click.native=“”，此時就可以實現點擊事件了。

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="handleClick('0')">黃金糕</el-dropdown-item>
    <el-dropdown-item @click.native="handleClick('1')">獅子頭</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

了解一下@click.native

• @click

@click 常見于其用在Vue中的事件綁定，而@實際上是 v-on 的簡寫，而 v-on 則是對 vue 的事件體系封裝之后的 API接口。

• native

native修飾符用于處理DOM原生事件，在本文中由于組件 DropDown并沒有封裝點擊事件，因此需要添加原生的點擊事件，因此使用@click.native。

擴展@click的其他用法

• @click.stop： 阻止事件冒泡

• @click.prevent： 阻止事件的默認行為 （提交事件不再重載頁面）

• @click.capture： 優先觸發

• @click.self： 只有自己能觸發，子元素無法觸發

• @click.once： 只能提交一次（. o n c e .once.once 修飾符還能被用到自定義的組件事件上。）

感謝各位的閱讀，以上就是“ElementUI中el-dropdown-item點擊事件無效怎么解決”的內容了，經過本文的學習后，相信大家對ElementUI中el-dropdown-item點擊事件無效怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！