2021-8-10 记录：vue @click.native和@click.stop和@click.self

最新推荐文章于 2024-03-04 09:39:17 发布

前端追随者

最新推荐文章于 2024-03-04 09:39:17 发布

阅读量341

点赞数

原文链接：https://blog.csdn.net/weixin_41646716/article/details/90069562

版权

本文介绍了在Vue中如何使用.native修饰符来绑定组件的原生事件，以解决在router-link上同时实现点击事件和路由跳转的问题。通过示例代码展示了如何在组件上添加@click.native事件监听器，并在methods中定义相应的方法进行路由跳转。强调了当给Vue组件绑定事件时，需要添加.native以确保事件能够正确触发。

摘要由CSDN通过智能技术生成

学习链接1
学习链接2
.native–侦听组件根元素上的原生事件
作用：给组件绑定原生事件
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的，因此需要加上 .native 才会触发事件
当给一个vue组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要

            <primary-title-home title="题目" 
            customClass="icon-urban-rural" @click.native="goRouteName('tcEquilibrium')" />
import primaryTitleHome from '@/components/common/primaryTitleHome'
   methods: {
        goRouteName(name) {
            this.$router.push({
                name
            })
        }
    },