Vue 中 .native 修饰符的作用是:在一个组件的根元素上直接监听一个原生事件。
而 el-input-number 的根元素并非 input,而是一个 div,那为什么使用 input.native 能起效呢?
其实,是 “事件捕获” 在起作用。也就是说在 input 框中修改数据时,它所有的父节点都会捕获 input 事件。因此,我们也就能在根元素 div 上监听到子节点的 input 事件。
我们在根节点上,添加捕获函数,做进一步验证,代码如下
然后,在 el-input-number 中输入数据,可以看到如下输出