【Vue6】自定义事件
2018-05-24 本文已影响0人
八宝君
本来这一章也觉得没有必要写的,但是看了一下,还是写一些吧,免得有些地方万一忘记了,还能回到这里来找找是因为什么原因出错。
这里的
handleClick
事件不会触发,无论怎么点击都不会触发,和上一章有一点点区别,上一章的@click
是写在了组件内的Template
里,这里是直接写在组件上。当给一个组件绑定了事件时,实际上这个事件绑定的是一个自定义的事件,真正的鼠标点击触发的事件并不是绑定的
click
事件,如果想触发自定义的click
事件,得这样写:这样写才行
如上图写,这样
child click
可以被打印出来,但是外面的click
还是没有打印出来,因为在div
元素上绑定的事件,指的是原生事件;而在child
上绑定的事件,只能是自定义事件。自定义事件怎么才能被触发呢?
子组件想要触发父组件这块的事件监听,用
$emit
去触发自定义事件。这样这样
这里会先弹出
childClick
,然后再弹出click
。这里的执行逻辑是:首先点击click的时候,子组件会先监听到自身的元素被点击了,然后再向外触发一个自定义事件,外层在child组件里又监听了这个自定义事件,所以最后
handleClick
被执行。但是这样做太麻烦了,就想直接监听到
child
上的原生事件,也有办法:加一个native
添加一个
native
,这样监听的就不是内部组件向外派发的自定义事件了,而是原生click
事件