【Vue6】自定义事件

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

如图所示

这里的handleClick事件不会触发,无论怎么点击都不会触发,和上一章有一点点区别,上一章的@click是写在了组件内的Template里,这里是直接写在组件上。
当给一个组件绑定了事件时,实际上这个事件绑定的是一个自定义的事件,真正的鼠标点击触发的事件并不是绑定的click事件,如果想触发自定义的click事件,得这样写:
这样写才行

如上图写,这样child click可以被打印出来,但是外面的click还是没有打印出来,因为在div元素上绑定的事件,指的是原生事件;而在child上绑定的事件,只能是自定义事件。
自定义事件怎么才能被触发呢?
子组件想要触发父组件这块的事件监听,用$emit 去触发自定义事件。
这样这样

这里会先弹出childClick,然后再弹出click。这里的执行逻辑是:
首先点击click的时候,子组件会先监听到自身的元素被点击了,然后再向外触发一个自定义事件,外层在child组件里又监听了这个自定义事件,所以最后handleClick被执行。
但是这样做太麻烦了,就想直接监听到child上的原生事件,也有办法:
加一个native

添加一个native,这样监听的就不是内部组件向外派发的自定义事件了,而是原生click事件

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 推开古堡的窗, 恍惚睁开双眼张望。 有寂寞在深夜里彷徨, 漆黑的世界太显凄凉。 幸福的生活总以妥协收场, 稚嫩的心...
    莫九爷阅读 271评论 0赞 1
  • 什么是沉没成本?当我们决定是否做一件事情的时候,既要看这件事情是否将来对我们有好处,又要注意自己是不是在过去这件事...
    Smile_Zhangjie阅读 273评论 0赞 0
  • D6/阿尔法号/阿基米德舱/陈滢118 一、今日学习知识点 1、收听晨间导读(战略是一门打造力量)及(最后一辩) ...
    依小呆阅读 183评论 0赞 0
  • 学习材料————廖雪峰js教程 数据类型 ===与== == 自动转换数据类型再比较;=== 不转换类型 (更好...
    ccminn阅读 1,952评论 0赞 4

友情链接更多精彩内容