vue.js - VueJS : Why Trigger 'Input' Event Within 'Input' Event Handler?

Question

我正在学习 VueJS。我正在弄清楚他们的货币验证example code .

Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)">
    </span>
  `,
  props: ['value'],
  methods: {
    // Instead of updating the value directly, this
    // method is used to format and place constraints
    // on the input's value
    updateValue: function (value) {
      var formattedValue = value
        // Remove whitespace on either side
        .trim()
        // Shorten to 2 decimal places
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // If the value was not already normalized,
      // manually override it to conform
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // Emit the number value through the input event
      this.$emit('input', Number(formattedValue))
    }
  }
})

updateValue 函数底部的 $emit 调用会触发输入事件。

当我将其注释掉时，实时货币验证不再起作用。所以我意识到它是有目的的。

但是为什么要在输入事件中触发输入事件呢？

你会认为输入事件会再次触发，导致 updateValue 处理程序再次触发，由于递归调用导致堆栈溢出。

我了解 VueJS 更简单的 $emit 示例代码。就像Jquery的触发功能一样。

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"

但是在货币验证示例中，我不明白为什么 $emit 以它的使用方式使用，以及为什么它以它的工作方式工作。

有人可以解释一下吗？

Answer 1

此处的 Emit 调用允许您在父上下文中 Hook 事件。 Input 事件也被 v-model 使用指令来处理与组件的双向绑定(bind)。
v-model='model'本质上是 v-bind:value='model' v-on:input='model = $event.target.value'加上一些额外的东西，让它玩起来很好。当您删除 this.$emit('input', Number(formattedValue)) 时您正在删除更新组件外部值的机制。

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

HTML 中的所有元素都有一系列用于常见事件的本地处理程序；调整大小、加载、卸载等。这些处理当页面改变它的渲染时要做什么，可以禁用或添加，因为 JavaScript 浏览器的引入使用了一个事件泵系统，允许将多个功能附加到任何事件引发事件时按顺序运行。一个例子是如何在调整大小时运行 3 个函数来处理边缘情况，例如最小/最大尺寸、屏幕方向等。

表单元素通常实现自己的基本事件函数:keydown、keyup、mousedown、mouseup。这些基本函数调用事件，使我们作为开发人员的生活更轻松，它们是:输入、模糊、焦点。有些具有专门的事件，如实现更改的选择元素、实现提交的表单标签。

焦点捕获键盘输入上的输入标签并显示文本输入光标以指示它已准备好接收输入。它为选项卡键码添加处理程序，该键码查找下一个可用输入并将焦点转移到该元素。事件泵样式函数系统在这里很棒，因为它允许您绑定(bind)焦点并在输入焦点时执行诸如更改背景颜色或边框之类的操作，而无需自己实现用于捕获输入或显示光标的代码。

输入标签也会引发 input当您输入它们时表示输入已更改的事件，告诉浏览器更改值并更新显示，以便用户期望的功能保持一致。

在 currency-input例如，我们添加了 updateValue函数与 native 函数一起工作并处理事件的输入值，在updateValue函数我们修改值的字符串表示并需要某个地方来放置它。您可以简单地添加一个数据属性来保存值并将输入的值属性绑定(bind)到允许 currency-input 的数据属性。在内部处理结果的显示，但这会将值锁定在私有(private)访问器后面，并且您将无法修改或检索生成的货币格式值的值。

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

它还与一些最相关的指令联系在一起 v-model这是允许 value 的语法糖属性绑定(bind)和 input事件绑定(bind)到当前上下文中的数据属性。通过提供 value支撑并发出 input event 自定义元素可以类似于 Vue 应用程序系统中的原生表单元素。当您想要打包和分发或重用组件时，这是一个非常有吸引力的功能。

去好多了:

...
<currency-input v-model='dollarValue'></currency-input>
<input v-model='dollarValue'>
...

比必须添加在 value和 input绑定(bind)无处不在，因此:

...
<currency-input v-bind:value='dollarValue' v-on:input='updateDollarValue($event.target.value)'></currency-input>
<input v-bind:value='dollarValue' v-on:input='updateDollarValue($event.target.value)'>
...

现在我奇怪的漫谈已经完成，我希望这有助于理解 currency-input 背后的一些模式和推理。例子。