Vue2中注册在router-link上事件无效解决方法

最新推荐文章于 2024-07-05 09:04:11 发布

Fairy_Yss

最新推荐文章于 2024-07-05 09:04:11 发布

阅读量730

点赞数 2

文章标签： vue自定义组件触发事件

本文链接：https://blog.csdn.net/Fairy_Yss/article/details/101346927

版权

今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发，

后来测试发现，所有绑定在router-link中的事件都不会触发

此后查看了官方的文档，也并没有给出明确的说明：

代码如下：

<li  >                
	<router-link to="/one" @click="change('color1')" :class="{'bgred':fff['color1']}">页面一</router-link>            
</li>

此刻我发现，无论如何定义在methods 中的 change函数并不会触发，这是为什么呢？
事件被阻止
如果当前router-link的tag不是a的话（官方文档中说明：默认为a，可以通过tag改变渲染后的标签），那么就会往自己的子元素（组件）找，找到的第一个就会把一些属性及时间覆盖过去。
所以此时事件是被阻止了。个人看法：因为router-link的作用是单纯的路由跳转，如果不阻止事件的话，也许会有很多坑，所以作者干脆阻止了其他事件的触发。
如何解决
只需要在@click后面加上native就可以了

<li  >                
	<router-link to="/two" @click.native="change('color1')" :class="{'bgred':fff['color1']}">页面一</router-link>            
</li>

native可以理解为原生，一定是用于自定义组件，也就是自定义的html标签。比如

<body>
 <div id="app">
  <div class="box" >
   <Son @click='handler1'></Son>
  </div>
 </div>
 
</body>
<script>
 const Son = Vue.component('Son', {
  template: '<button @mouseover=handler2 class="box1">son</button>',
  methods: {
   handler2 (e) {
     
   }
  }
 })
 new Vue({
  el: "#app",
  components: {
   Son
  },
  data() {
   return {
    a: 123
   }
  },
  methods: {
   handler1 (e) {
    console.log('父级')
   }
  }
 })
 
</script>

当<Son @click=‘handler1’>，子组件中的this.$listeners返回的是{click: ƒ}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click。
当<Son @click.native=‘handler1’>，子组件中的this.$listeners返回的是{}，box1的dom上绑定了click事件（可以打开F12查看），所以这个事件是原生的click。
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。