关于端午节的古诗（关于@click.native中 .native 的含义与使用方式）

时间2025-08-03 09:40:11分类IT科技浏览5626

导读：vue的@click.native问题...

vue的@click.native问题

.native--侦听组件根元素上的原生事件

作用： 给组件绑定原生事件

@click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口

也就是说，在处理DOM原生事件的场合中需要添加额外的标识符

比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的，因此需要加上 .native 才会触发事件

当你给一个vue组件绑定事件的时候，要加上native ，如果是普通的html元素，就不需要

<template> <div id="app"> <Button @click.native = goToNext>点击跳转</Button> </div> </template> <script> import Button from ../components/Button export default{ components:{ Button }, data(){ return{ } } methods:{ goToNext(){ alert(hello--world) } } } </script>

@click.native.prevent

1.给vue组件绑定事件时候，组件加上.native才能监听原生事件，否则会认为监听的是来自Item组件自定义的事件，

在封装好的组件上使用，所以要加上.native才能click

2.prevent 是用来阻止默认的，相当于原生的event.preventDefault()

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。

但父组件想在子组件上监听自己的click的话，需要加上native修饰符

js原生事件类型：

click：单击 dblclick：双击 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠标悬浮 mouseout：鼠标离开 mousemove：鼠标移动

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。