vue中@click和@click.native.prevent的区别

目录
  • @click和@click.native.prevent区别
  • @click.native中.native的含义与使用

@click和@click.native.prevent区别

@click是用在按钮上的语法糖

而@click.native是给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件

prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。

这里说说默认事件

默认事件就是默认执行的事件，比如 a标签，点击a标签，页面会自动跳转

@click.native中.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>

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

赞 (0)

相关推荐

  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • vue组件添加事件@click.native操作

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v

  • vue键盘事件点击事件加native操作

    如下所示: <el-card class="box-card animated flipInY"> <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="d

  • vue中touch和click共存的解决方式

    在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent.注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生. touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发 产生冲突的原因 我们可以

  • 详谈vue中router-link和传统a链接的区别

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的区别呢? 官方中给出的解释是这样的: <router-link> 比起写死的 <a href="..." rel="external nofollow" rel="external nofollow" >

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • vue中传参params和data的区别

    vue中传参params和data的区别

    目录 1.使用data传参 2.使用params传参 3.总而言之 1.使用data传参 前端请求方式为post import request from '@/utils/request' // 新增banner export function saveBanner(data){ return request({ url:'/system/banner/saveBanner', method:'post', data:data }) } 后端接口接收 /** * 保存导航图 * * @param

  • vue中@click和@click.native.prevent的区别

    vue中@click和@click.native.prevent的区别

    目录 @click和@click.native.prevent区别 @click.native中.native的含义与使用 @click和@click.native.prevent区别 @click是用在按钮上的语法糖 而@click.native是给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 prevent是用来阻止默认的事件.就相当于…event.preventDefault(),父组件想在子组件上监听自己的click的话,需要加上nati

  • vue中v-model和.sync修饰符的区别

    vue中v-model和.sync修饰符的区别

    目录 前言 一.v-model 1. 作用 2.v-model的本质 3. v-model的特殊用法 二..sync修饰符 1. .sync修饰符作用 2. .sync修饰符本质 总结 .sync与v-model区别是 前言 在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖.但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符.在这里就两者的使用进

  • Vue中computed、methods与watch的区别总结

    前言 对于那些开始学习Vue的人来说,对于方法.计算属性和观察者之间的区别有点混淆. 尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的. 在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例.我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点. Methods 在一个方法中,或多或少是您所期望的--一个对象属性的函数.您可以使用方法对发生在DOM中的事件作出反应,或者可以从组件中的其他位置调用它们,例如,从计算属性或观察

  • 如何在vue中使用jsx语法

    如何在vue中使用jsx语法

    目录 为什么需要在vue中使用jsx 在vue中如何使用jsx template转jsx的语法转换 为什么需要在vue中使用jsx 几年前面试的时候,被问过这个问题,当时我一脸懵,这两个东西为啥要混用呢? 直到后来,我遇到了这种场景. tab切换展示组件,大部分组件展示表格,除了2个tab需要展示不同,这个不同,怎么处理呢? 当然可以直接改封装的tab组件,v-if条件渲染嘛 那如果后面再有其他需求,tab组件继续写if么 这个时候,组件就过于冗余啦 那怎么让组件统一处理呢?当然可以用rende

  • 关于vue中@click.native.prevent的说明

    关于vue中@click.native.prevent的说明

    目录 关于@click.native.prevent的说明 元素中绑定了这个事件 vue的@click.native.prevent,点击事件加上native.prevent有什么用呢 代码如下 关于@click.native.prevent的说明 元素中绑定了这个事件 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @c

随机推荐