当前位置 : 主页 > 网络编程 > JavaScript >

关于@click.native中 .native 的含义与使用方式

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 vue的@click.native问题 @click.native.prevent vue的@click.native问题 .native--侦听组件根元素上的原生事件 作用: 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定,而@实际上是
目录
  • vue的@click.native问题
  • @click.native.prevent

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:鼠标移动

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

上一篇:开启Vue项目缺少node_models包的问题及解决
下一篇:没有了
网友评论