Пользовательские События

Настройка компонента v-модель

В v-модели компонента используйте значение в качестве реквизита и вводите как событие по умолчанию, но некоторые типы ввода, такие как переключатели и флажки, могут использовать атрибут value для совершенно другой цели. Использование модели может помочь нам избежать конфликта в таких случаях:

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: 
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
   >
  
})

Когда мы используем v-модель для этого компонента, мы имеем:

<base-checkbox v-model="lovingVueJs"></base-checkbox>

значение lovingVueJs будет передано проверенному объекту. когда генерирует событие изменения с новым значением, свойство lovingVueJs будет обновлено.

Привязка собственных событий к компонентам

Могут быть случаи, когда мы хотим напрямую прослушивать собственное событие в корневом элементе компонента. В таких случаях мы можем использовать собственный модификатор для v-on:

<base-input v-on:focus.native="onFocus"></base-input>

Хотя иногда это может быть полезно, однако это не очень хорошая идея, когда вы пытаетесь прослушать очень специфический элемент, например, <input>. Например, показанный выше компонент <base-input> должен выполнить рефакторинг так, чтобы корневой элемент был фактически элементом <label>:

<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

Родной слушатель в родителе молча сломался бы в этом случае. Хотя ошибки не будет, обработчик onFocus не будет вызван, когда мы этого ожидаем.

Однако Vue предоставляет решение этой проблемы, это решение достигается с помощью свойства $ listener, содержащего объект слушателей, используемых в компоненте:

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

Когда мы используем свойство $ listeners, мы можем переслать все прослушиватели событий компонента конкретному дочернему элементу с помощью v-on = "$ listeners". Естественно, мы захотим использовать v-модель для таких элементов, как <input>, в таких случаях полезно создать новое вычисляемое свойство для слушателей, как в случае inputListeners ниже:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` merges objects together forming a new object
      return Object.assign({},
        // All the listeners are added from the parents
        this.$listeners,
        // We can then add custom listeners or override the
        // behavior of some listeners.
        {
          // This ensures that the component will work with v-model
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: 
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
})

Модификатор .sync

Есть определенные случаи, когда нам может понадобиться «двусторонняя привязка» для опоры. Однако это может создать проблемы с обслуживанием. Вместо этого рекомендуется отправлять события в шаблоне обновления: myPropName. Например, учитывая гипотетический компонент с опорой заголовка, мы могли бы сообщить о намерении присвоить новое значение с помощью:

this.$emit('update:title', newTitle)

И тогда родитель может прослушать это событие и обновить свойство локальных данных, когда захочет. Например:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>