美文网首页
【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】自定义事件

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