關於vue中@click.native.prevent的說明

Posted on by

關於@click.native.prevent的說明

元素中綁定瞭這個事件

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登錄</el-button>

1、在封裝好的組件上使用，所以要加上.native才能click。

2、prevent是用來阻止默認的事件。就相當於…event.preventDefault()，父組件想在子組件上監聽自己的click的話，需要加上native修飾符。

vue的@click.native.prevent，點擊事件加上native.prevent有什麼用呢

在項目發版的總結過程中，突然看到@click.native.prevent，很好奇它的用法，一開始還以為是element-ui裡面自帶瞭，看瞭之後也沒有啊，上網搜集瞭資料，打算記錄下來。

代碼如下

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item     @click.native.prevent="handleAgencyRelationship(row)">代理關系處理</el-dropdown-item>
  </el-dropdown-menu>

elment-ui

我們項目的業務場景的點擊事件，是不需要用到按鈕的，所以我們需要用到的是原生的vue點擊事件。而加native.prevent的精髓就在此

  • 給vue綁定組件的時候，需要加一個native,不加的話會被認為是要監聽item裡面的自定義事件，（顯然我們這裡不需要）
  • 加prevent，是用來阻止默認事件的，相當於Jquery裡面的event.preventDefault（）方法阻止元素發生默認的行為。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：