vue输入框输入触发事件_vue.js – VueJS：为什么在’Input’事件处理程序中触发’输入’事件？...

此处的Emit调用允许您在父上下文中挂钩事件. V-model指令还使用Input事件来处理与组件的双向绑定.

v-model =’model’本质上是v-bind：value =’model’v-on：input =’model = $event.target.value’,增加了一些位以使其发挥出色.当你删除它.$emit(‘input’,Number(formattedValue))你正在删除更新组件外部值的机制.

编辑：@Jay小心你有时想要什么

HTML中的所有元素都有一系列针对常见事件的本机处理程序;调整大小,加载,卸载等.当页面改变它的呈现并且可以被禁用或添加时,它们处理该做什么,因为JavaScript浏览器的引入使用了一个事件泵系统,允许将多个功能附加到任何事件上引发事件时按顺序运行.一个例子是如何在调整大小时运行3个函数来处理边缘情况,例如最小/最大尺寸,屏幕方向等.

表单元素通常实现自己的基本事件功能：keydown,keyup,mousedown,mouseup.这些基本函数调用事件,使我们的生活更容易作为开发人员,这些是：输入,模糊,焦点.有些具有专门的事件,如实现变更的选择元素,实现提交的表单标签.

焦点捕获键盘上的输入标签输入并显示文本输入光标以指示它已准备好接收输入.它为tab键代码添加了处理程序,它找到下一个可用输入并将焦点转移到该元素.事件泵样式函数系统非常棒,因为它允许您绑定到焦点并执行诸如在输入聚焦时更改背景颜色或边框等操作,而无需实现捕获输入或自己显示光标的代码.

当您输入输入标记时,输入标记也会引发输入事件,指示输入已更改,告知浏览器更改值并更新显示,以便用户期望的功能保持一致.

在货币输入示例中,我们添加updateValue函数以使用本机函数并处理事件的输入值,在updateValue函数中我们修改值的字符串表示并需要某个位置来放置它.你可以简单地添加一个数据属性来保存值,并将输入的value属性绑定到data属性,允许货币输入在内部处理结果的显示但是这会将值锁定在私有访问器后面,你将无法修改或检索生成的货币格式化值的值.

使用此.$emit(‘input’,Number(formattedValue))updateValue函数通过引发可由父上下文捕获并使用的事件,类似于本机输入标记.您可以将它存储在一个值中,将其用作函数的基础,或者甚至完全忽略它,尽管这可能没有多大帮助.这允许您跟踪输入的值并根据需要进行修改或将其发送到服务器,显示它等.

它还绑定了一些最有针对性的v-model指令,它是一个语法糖,允许值属性绑定和输入事件绑定到当前上下文中的数据属性.通过提供值prop并发出输入事件,自定义元素可以类似于Vue应用程序的系统中的本机表单元素.当您想要打包和分发或重用组件时,这是一个极具吸引力的功能.

去的好多了：

...

...

比必须添加值和输入绑定到处都是：

...

...

现在我完成了奇怪的漫游,我希望这有助于理解货币输入示例背后的一些模式和推理.