简答
ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである , 今天解决一个忘记很久的一个问题,今天又重新遇到了,就顺便讲掉。
vue router-link点击事件失效
简答
这样不行
<router-link to="/app" @click="doClick">
点击跳转
</router-link>
这样行
<router-link to="/app" @click.native="doClick">
点击跳转
</router-link>
详解
<router-link to="/app" @click="doClick">
点击跳转
</router-link>
methods: {
doClick() {
console.log('ok');
}
}
此时,无法触发点击事件.
究其原因,是因为router-link标签会默认屏蔽所有的事件,且不只是点击事件。
所以需要在@click后面添加 .native
<router-link to="/app" @click.native="doClick">
点击跳转
</router-link>
但其实,咱的自定义标签包括router-link都是会默认地屏蔽原生的监听事件,需要添加 .native修饰符
PS:非自定义标签就是HTML本来就存在的标签比如 div h1 h2 h3 ui li table form 等等
<HelloDemo @click.native="getClick"></HelloDemo>
这个HelloDemo就是我自己创建的标签,要触发点击事件,依旧需要在点击事件添加后缀 .native
其实这样自定义的标签,本质上都是属于vue组件,不相信的可以获取其dom然后打印出来
console.log(this.$refs.demo.__proto__);
在这些组件中,v-on只会监听自定义事件(即组件通过$emit触发的事件),而根元素的原生事件,是不会监听的。所以如果想要监听原生事件,就要使用“.native”修饰符去注册一个H5标签,之后就可以添加事件了。
总结
细节问题,记得吸取教训,看完我这篇博客之后就不要再犯这样的错误了!