router-link 綁定事件不生效


在vue中綁定事件是一下這種方法:

v-on:click='函數名稱';

@click = '函數名稱';

這兩種寫法都是正常。

但是我們使用了 vue-router 路由時會使用 <router-link> 標簽來代替 a 標簽跳轉。我們在 vue-router 標簽綁定 @click 事件 。

 <router-link to="/date" @click="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}

卻發現函數並沒有執行。這是怎么回事。。。  

加 .native 修飾符就可以執行事件了。

 <router-link to="/date" @click.native="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}  

解釋:

1: 因為它是自定義標簽,根本就沒有事件和方法,所以不觸發,加個native 就是告訴vue 這個標簽現在有主了 它是H5標簽 可以加事件了。

2:父組件要想在子組件監聽自己的click事件就得加native,router-link是標簽啊。哪里有父組件???? 

 群里大佬一句說明了原因 router-link  其實就是一個封裝好的 .vue 組件,所以需要 加.native修飾符才能綁定事件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM