Vue将原生事件绑定到组件

阅读vue文档时发现这个原生事件绑定到组件的地方不太懂，阅读了下资料总结如下：

引子：

当我们定义了一个子组件son（里面写了个按钮button），在父组件father中引用了，然后我们想在上面绑定click事件，触发handleClick回调。
但click并没触发。

原因：

因为vue有自己事件运行机制，子组件son不是原生DOM元素，我们是无法直接给其绑定原生事件并触发的。

解决方法：

1. 使用native修饰符
2. 使用$emit分发事件
3. 使用$listeners

一：
仅需要在click事件后加上.native就可，相当于我们会把事件放在原生button标签上，此时事件便触发，click就打印了。
但是其存在局限性：它只会把事件放在子组件的根标签上，子组件的根标签就是button，自然就触发了。
二：
回调中使用$emit分发事件，使父组件事件触发。
三：
$listeners它是一个对象，里面包含了作用在这个组件上的所有监听器。v-on="$listeners" ，就是将所有的事件监听器指向这个原生元素。

拓展：
当我们使用 $attrs 和 $listeners 时，my-input就相当于一个完全透明包裹器了。

怎么理解这句话呢？

——前面我们已经知道了 v-on = $listeners 会把 所有父组件绑定到该子组件上的事件都放在该元素上

而使用 v-bind = $attrs 会把 除在props中声明了的，除style和class 的父传子的参数 都放在该元素上。

那么 当我们同时使用两者放到某个元素上时 ，就已经把父组件所有放在子组件标签（my-input）上的属性、事件， 全都放在了该元素上

此时，事件调用、属性获取都不再有障碍， my-input 不就可以理解成是透明的了嘛~