So verwenden Sie benutzerdefinierte Vue.js-Ereignisse für Formulareingabekomponenten

Dieses Mal zeige ich Ihnen, wie Sie benutzerdefinierte Ereignisse von Vue.js verwenden, um Formulareingabekomponenten zu implementieren. Was sind die Vorsichtsmaßnahmen für die Verwendung benutzerdefinierter Ereignisse von Vue.js, um Formulareingabekomponenten zu implementieren? Praktischer Fall, schauen wir uns das gemeinsam an.

Vue.js verwendet benutzerdefinierte Ereignisformular-Eingabekomponenten

Benutzerdefinierte Ereignisse können zum Erstellen benutzerdefinierter Formulareingabekomponenten verwendet werden, wobei das V-Modell zum Verarbeiten von Daten verwendet wird. Zwei-Wege-Bindung . Beachten Sie Folgendes:

<input v-model="something">

Dies ist nur syntaktischer Zucker für das folgende Beispiel:

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

Wenn es also in einer Komponente verwendet wird, es entspricht dem Folgenden. Die Abkürzung von:

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>

Damit das V-Modell der Komponente wirksam wird, sollte es (ab 2.2.0 konfigurierbar) sein:

Akzeptiert eine Wert-Requisite

Lösen Sie das Eingabeereignis aus, wenn ein neuer Wert vorhanden ist, und verwenden Sie den neuen Wert als Parameter

Sehen wir uns eine sehr einfache benutzerdefinierte Währungseingabesteuerung anSteuerung:--In der übergeordneten Komponente Beim Verweisen auf eine Unterkomponentenvorlage in einer Komponente V-Modelldaten binden:

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
 template: '\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 ',
 props: ['value'],
 methods: {
  // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
  updateValue: function (value) {
   var formattedValue = value
    // 删除两侧的空格符
    .trim()
    // 保留 2 位小数
    .slice(
     0,
     value.indexOf('.') === -1
      ? value.length
      : value.indexOf('.') + 3
    )
   // 如果值尚不合规，则手动覆盖为合规的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通过 input 事件带出数值
   this.$emit('input', Number(formattedValue))
  }
 }
})

Selbstdefiniert ' s V-Modell

Neu in 2.2.0

Standardmäßig verwendet das V-Modell einer Komponente Wertprop- und Eingabeereignisse. Aber Eingabetypen wie Optionsfelder und

Kontrollkästchen können Werte für andere Zwecke verwenden. Die Modelloption kann solche Konflikte vermeiden:

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // 这样就允许拿 `value` 这个 prop 做其它事了
  value: String
 },
 // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

Der obige Code entspricht:

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

Beachten Sie, dass Sie die geprüfte Requisite immer noch explizit deklarieren müssen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie xe-utils in vue

vue-router zeigt beim Erstellen keine Routen an So gehen Sie mit der Seite um

Das obige ist der detaillierte Inhalt vonSo verwenden Sie benutzerdefinierte Vue.js-Ereignisse für Formulareingabekomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!