在vue學習中遇到給router-link 標簽添加事件@click 、@mouseover等無效的情況

我想要做的是v-for遍歷出來的選項卡，

鼠標移上去出現刪除標簽，移除標簽消失的效果

原代碼：

<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}<i class="contain_tab_close" v-show="selected==index"></i> </router-link>

后在發現參考 ?

https://segmentfault.com/q/1010000007896386

http://www.jianshu.com/p/0a8a89687bb6

根據Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發事件給父組件。但父組件想在子組件上監聽自己的click的話，需要加上native修飾符。

所以如果在想要在router-link上添加事件的話需要這樣寫 ——>@click.native="FunctionName"

所以如果要事件有效的話，改成如下：

<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}<i class="contain_tab_close" v-show="selected==index"></i> </router-link>

?

總結

以上是生活随笔為你收集整理的vue router-link 添加点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。