VueJS: Почему Триггер События 'Ввод' В 'Ввод' Обработчик События?

Я изучаю VueJS. Я выясняю их валютную валидацию пример кода.

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))
    }
  }
})

вызов $emit в нижней части функции updateValue запускает входное событие.

когда я комментирую это, проверка валюты в реальном времени больше не работает. Так я понимаю, что у него есть цель.

а зачем вызывать событие ввода в ввода событие?

вы думаете, что входное событие будет срабатывать снова, вызывая updateValue обработчик снова запускается, вызывая переполнение стека из-за рекурсивных вызовов.

Я понимаю, что VueJS гораздо проще $emit пример кода. Это так же, как триггерная функция Jquery.

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

но в примере проверки валюты я не понимаю, почему $emit используется так, как он используется, и почему он работает так, как он работает.

может кто-нибудь объяснить?

1 ответов


вызов Emit здесь должен позволить вам подключиться к событию в родительских контекстах. Событие Input также используется v-model директива для обработки двухсторонней привязки с компонентами.

v-model='model' по сути v-bind:value='model' v-on:input='model = $event.target.value' С некоторыми добавленными битами, чтобы он играл хорошо. При удалении this.$emit('input', Number(formattedValue)) вы удаляете механизм, который обновляет значение вне компонента.

EDIT: @Jay осторожно, что вы хотите иногда

все элементы в HTML ряд собственных обработчиков для общих событий; изменение размера, загрузка, выгрузка и т. д. Они обрабатывают, что делать, когда страница изменяет ее рендеринг и может быть отключена или добавлена, так как введение браузеров JavaScript использовали систему накачки событий, которая позволяет подключать несколько функций к любому событию, которое выполняется последовательно при возникновении события. Например, как вы можете запускать 3 функции при изменении размера для обработки краевых случаев, таких как минимальный/максимальный размер, ориентация экрана так далее.

элементы формы обычно реализуют свои собственные функции базового события: keydown, keyup, mousedown, mouseup. Эти базовые функции вызывают события, чтобы сделать нашу жизнь проще как разработчиков, это: ввод, размытие, фокус. У некоторых есть специализированные события, как в select elements, реализующих change, form tags, реализующих submit.

входные теги на вводе клавиатуры захвата фокуса и отображать курсор ввода текста, чтобы указать, что он готов к приему ввода. Он добавляет в обработчики на вкладке код, который находит следующий свободный вход и смещает фокус на этот элемент. Система функций стиля Event pump здесь великолепна, поскольку она позволяет вам связываться с фокусом и делать такие вещи, как изменение цвета фона или границы, когда вход сфокусирован, без необходимости реализовывать код для захвата ввода или отображения курсора самостоятельно.

входные теги также поднимают input событие, когда вы вводите их, указывая, что вход изменился, сообщая браузеру измените значение и обновите дисплей, чтобы функциональность, ожидаемая пользователем, была согласованной.

на currency-input пример мы добавляем updateValue функция для работы с собственной функцией и обработки входного значения события в updateValue функция мы изменяем строковое представление значения и должны где-то его поместить. Вы можете просто добавить свойство данных для хранения значения и привязать свойство value ввода к свойству data, позволяющему currency-input в внутренне обработайте отображение результата, но это заблокирует значение за частным доступом, и вы не сможете изменить или получить значение результирующего значения в формате валюты.

используя this.$emit('input', Number(formattedValue)) на updateValue функция действует аналогично родной input тег, вызывая событие, которое может быть захвачено родительским контекстом и работать с ним. Вы можете сохранить его в значении, использовать его в качестве основы для функции или даже полностью игнорировать его, Хотя это может не помочь много. Это позволяет отслеживать значение входного сигнала и изменять его по мере необходимости или отправлять на сервер, отображать и т. д.

он также связывается в несколько директив наиболее уместно v-model, который является синтаксическим сахаром для value привязка свойств и input привязка события к свойству данных в текущем контексте. Предоставляя value prop и испуская input событие пользовательский элемент может действовать аналогично собственному элементу формы в системах Vue приложение. Чрезвычайно привлекательная функция, когда вы хотите упаковать и распространить или повторно использовать компоненты.

гораздо приятнее идти:

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

чем добавить в value и input привязки везде ergo:

...
<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 пример.