Vue中.native给组件绑定原生事件

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

努力_才幸福

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

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_38098192/article/details/80624711

vue 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用.native修饰符来绑定原生DOM事件。当使用<router-link>等组件时，若需直接绑定点击等事件而非依赖其默认行为，则需使用.native修饰符。本文通过具体示例解释了.native修饰符的工作原理及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生就类似于直接使用$element.addEventListener(click,callback)绑定事件。

<router-link :to="item.path" :exact="true" :aria-expanded="isExpanded(item) ? 'true' : 'false'"
                     v-if="item.path" @click.native="toggle(index, item)">

如果不给router-link加.native,那么点击事件就不会执行，只有加上.native,事件才会执行，这是因为router-link的作用是路由跳转，不是普通的标签，在用template中的内容替换掉组件时，如果不加.native，默认原来组件上的事件是不会跟过来的，.native的作用就是把组件变回原生DOM的一种方式