vue @click与@click.native,及vue事件机制的使用分析

目录
  • @click与@click.native及vue事件机制
  • 点击事件@click 失效

@click与@click.native及vue事件机制

vue维护了自己的事件机制。

所以就有了原生DOM事件和自定义事件的区别，比如下面这段官网原话。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

本文也将围绕这一句话展开。

想必大家都会在自定义组件中自定义事件。

<my-component v-on:my-event="doSomething"></my-component>

那么如何给自定义组价添加原生事件呢，其实想一想理论上是不可行的，因为自定义组件最终不会渲染到页面上，怎么加？

所以Vue给自定义组件绑定原生事件的做法是：把原生事件绑定到组件的根节点，根节点就只有一个嘛…

但是你要告诉vue，当前要给原生节点绑定DOM事件，而不是自定义事件。如下：

<!-- 以下无论你怎么点击hello都不会触发父组件的事件的 -->
<!-- 除非加上@click="$emit('click')"，也就是触发自定义事件 -->
<template>
  <div class="hello">
    hello
  </div>
</template>
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" @click="clickEvent"/>
  </div>
</template>
<script>
  methods: {
    clickEvent(){
      console.log('事件触发')
    }
  }
</script>

或者直接简单的使用.native。

<HelloWorld msg="Welcome to Your Vue.js App" @click.native="clickEvent"/>

好了，你已经了解了.native的用途。接下来，再说一说原生节点绑定自定义DOM事件。直接看代码如下：

<template>
  <div id="app" @customizedEvent="myEvent">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    const app = document.getElementById('app');
    const event = document.createEvent('HTMLEvents');
    event.initEvent('customizedEvent', false, true);
    app.dispatchEvent(event);
  },
  methods: {
    myEvent() {
      console.log('customizedEvent')
    }
  }
}
</script>

我们通过原生的事件派发机制可以触发绑定到原生元素的事件。说明vue帮你做的事情其实是

app.addEventListener('customizedEvent', myEvent, false);

也就是说并非走的组件中的自定义事件，而是原生的DOM事件。

点击事件@click 失效

问题：在标签上设置点击事件@click，发现无法触发事件发生

原因：发现这个标签上有个全局样式，对它造成了影响;

pointer-event: none

解决：将这个属性值改为auto即可

pointer-event: auto

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

赞 (0)

相关推荐

  • 浅谈Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落.特别是在组件层级比较深的情况下.通过广播和事件分发的机制,就显得比较混乱了. 官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化 1.使用$emit触发事件 helloWorld.vue作为父组件,dialogConfigVi

  • 一篇文章带你了解vue.js的事件循环机制

    一篇文章带你了解vue.js的事件循环机制

    目录 一.事件循环机制介绍 二.经典事件循环面试题 总结 一.事件循环机制介绍 JS是单线程的语言,浏览器和Node.js定义了各自的Event Loop(事件循环机制)则是用来解决异步问题.将程序分为“主线程(执行栈)”与“Event Loop线程”,“主线程”自上而下依次执行同步任务,“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行. 事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环,是指浏览器或Node 的一种解决

  • 深入理解Vue.js源码之事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出

  • vue @click与@click.native,及vue事件机制的使用分析

    vue @click与@click.native,及vue事件机制的使用分析

    目录 @click与@click.native及vue事件机制 点击事件@click 失效 @click与@click.native及vue事件机制 vue维护了自己的事件机制. 所以就有了原生DOM事件和自定义事件的区别,比如下面这段官网原话. 用在普通元素上时,只能监听原生 DOM 事件.用在自定义元素组件上时,也可以监听子组件触发的自定义事件. 本文也将围绕这一句话展开. 想必大家都会在自定义组件中自定义事件. <my-component v-on:my-event="doSomet

  • JS 事件机制完整示例分析

    本文实例讲述了JS 事件机制.分享给大家供大家参考,具体如下: <html> <head> <title>js事件机制</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testOnclick(){ alert("我是单击事件"); } function testdblOnclic

  • vue中的@click.native 原生点击事件

    目录 @click.native原生点击事件 给vue组件绑定事件时候 等同于在自组件中 vue点击事件补充.native 步骤 官网的解释 @click.native原生点击事件 给vue组件绑定事件时候 必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 等同于在自组件中 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) vue点击事件补充.native 发现vue中加载Element 之后 键盘事件

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • 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中阻止click事件冒泡,防止触发另一个事件的方法

    使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部

  • VUE中v-on:click事件中获取当前dom元素的代码

    在开发中总是忘记,特意在此记录 关键字:   $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-

  • vue button的@click方法无效钩子函数没有执行问题

    vue button的@click方法无效钩子函数没有执行问题

    目录 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 跨域问题 userData is not defined Vue的第四个bug 钩子函数(mounted/created) Vue的第五个bug vue @click失效问题 贴代码(直接截图) 解决方法 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 事故还原 小胖做完公司的项目,老大看着小胖疲惫的脸庞,有点心疼小胖,就给小胖放了三天假,没有给小胖新的需

  • vue源码解析之事件机制原理

    上一章没什么经验.直接写了组件机制.感觉涉及到的东西非常的多,不是很方便讲.今天看了下vue的关于事件的机制.有一些些体会.写出来.大家一起纠正,分享.源码都是基于最新的Vue.js v2.3.0.下面我们来看看vue中的事件机制: 老样子还是先上一段贯穿全局的代码,常见的事件机制demo都会包含在这段代码中: <div id="app"> <div id="test1" @click="click1">click1<

  • vue自定义组件如何添加使用原生事件

    目录 自定义组件如何添加使用原生事件 . $emit()传递 . native属性 vue使用原生事件 自定义组件如何添加使用原生事件 自定义组件(Components)是vue的重要知识块之一,使用中不少人会发现一个问题:为什么我在组件里绑定click事件不起作用?这里先看看原因吧. 在自定义组件中直接绑定原生事件vue可是"不待见"的,它会认为你没有定义这个事件,所以没有任何反应. 哪些是原生事件? 例如click单击.mouseover鼠标移入.mouseout鼠标移出.keyu

随机推荐