美文网首页
【Vue6】自定义事件

【Vue6】自定义事件

作者: 八宝君 | 来源:发表于2018-05-24 16:08 被阅读0次

本来这一章也觉得没有必要写的,但是看了一下,还是写一些吧,免得有些地方万一忘记了,还能回到这里来找找是因为什么原因出错。

如图所示
这里的handleClick事件不会触发,无论怎么点击都不会触发,和上一章有一点点区别,上一章的@click是写在了组件内的Template里,这里是直接写在组件上。
当给一个组件绑定了事件时,实际上这个事件绑定的是一个自定义的事件,真正的鼠标点击触发的事件并不是绑定的click事件,如果想触发自定义的click事件,得这样写:
这样写才行
如上图写,这样child click可以被打印出来,但是外面的click还是没有打印出来,因为在div元素上绑定的事件,指的是原生事件;而在child上绑定的事件,只能是自定义事件。
自定义事件怎么才能被触发呢?
子组件想要触发父组件这块的事件监听,用$emit 去触发自定义事件。
这样这样
这里会先弹出childClick,然后再弹出click。这里的执行逻辑是:
首先点击click的时候,子组件会先监听到自身的元素被点击了,然后再向外触发一个自定义事件,外层在child组件里又监听了这个自定义事件,所以最后handleClick被执行。
但是这样做太麻烦了,就想直接监听到child上的原生事件,也有办法:
加一个native
添加一个native,这样监听的就不是内部组件向外派发的自定义事件了,而是原生click事件

相关文章

  • 【Vue6】自定义事件

    本来这一章也觉得没有必要写的,但是看了一下,还是写一些吧,免得有些地方万一忘记了,还能回到这里来找找是因为什么原因出错。

  • vue6

    Webpack的配置和使用 安装 全局安装 本地安装 使用 直接通过命令参数来执行 如果是全局安装的 如果是本地安...

  • 自定义事件js

    title: 自定义事件date: 2017-06-06 15:36:04tags: 自定义事件 js的自定义事件...

  • jQuery例子记录(持续更新)

    目录: 1.自定义事件2.操作DOM(与JS原生对比) 1.自定义事件 绑定自定义事件: 事件名称refresh....

  • JavaScript之事件完整篇

    目录html原生事件自定义事件node中的自定义事件前端框架的自定义事件 一、html原生事件 1. 概念 观察者...

  • springboot之事件监听

    springboot事件监听 自定义事件 自定义事件继承至ApplicationEvent,事件类不能注册为spr...

  • this.$emit()

    this.$emit("自定义事件") 通过触发自定义事件,来给触发监听事件

  • JS中的事件

    JS中的事件 一:自定义事件 1.使用Event自定义事件 使用Event接口,可以自定义事件。但是该接口无法在事...

  • vs2017开发ActiveX(主讲OCX)(六)、添加自定义事

    添加自定义事件 前言 自定义事件与常用事件的不同之处在于它们不会被类COleControl自动触发。 自定义事件将...

  • jquery怎样绑定事件及事件函数

    绑定事件方式: 取消绑定事件方式: 事件函数列表: 自定义事件:除了系统事件外,可以通过bind方法自定义事件,然...

网友评论

      本文标题:【Vue6】自定义事件

      本文链接:https://www.haomeiwen.com/subject/xissjftx.html