为什么自定义v-model组件可以正常触发@change和@input事件？

这个现象是Vue的透传属性机制结合原生DOM事件冒泡特性共同导致的，具体逻辑如下：

• 首先是Vue的*透传属性（Fallthrough Attributes）*规则：如果给组件绑定的事件没有在组件的emits配置项中声明，Vue会默认将这些事件监听器绑定到组件的根DOM节点上，也就是你Comp.vue模板最外层的<div>元素。
• 其次是原生DOM的事件冒泡特性：组件内部封装的原生<input>元素触发的input、change属于会冒泡的原生事件，事件触发后会沿着DOM层级向上传播，到达组件根节点的<div>时，就会触发你绑定在组件上的对应事件回调，所以doSth1和doSth2都能正常执行。

你可以通过两种方式验证这个逻辑：

1. 在组件导出配置中添加inheritAttrs: false，关闭透传属性功能，此时事件监听器不会绑定到根节点，两个回调都不会触发。
2. 给内部<input>元素添加@input.stop、@change.stop修饰符，阻止原生事件冒泡，同样会导致两个回调无法触发。

内容的提问来源于stack exchange，提问作者danielmoessner