Formulareingabekomponentenmethode des benutzerdefinierten Ereignisses von Vue.js

Im Folgenden werde ich Ihnen eine Formulareingabekomponentenmethode für benutzerdefinierte Vue.js-Ereignisse vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Vue.js verwendet benutzerdefinierte Ereignisformular-Eingabekomponenten

Benutzerdefinierte Ereignisse können verwendet werden, um benutzerdefinierte Formulareingabekomponenten zu erstellen und das V-Modell zum Verarbeiten von Daten zu verwenden. Zwei-Wege-Bindung . Etwas, das Sie im Hinterkopf behalten sollten:

<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, ist es äquivalent zu die Abkürzung für:

<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 Wertprop

in Das Eingabeereignis wird ausgelöst, wenn ein neuer Wert vorliegt und der neue Wert als Parameter verwendet wird

Schauen wir uns ein sehr einfaches benutzerdefiniertes Steuerelement für die Währungseingabe an: --Verwenden Sie die Bindung v-, wenn Sie auf die verweisen Untergeordnete Komponentenvorlage in den Modelldaten der übergeordneten Komponente:

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

rrree

Benutzerdefiniertes V-Modell der Komponente

2.2.0 Hinzugefügt

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

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

Der obige Code entspricht:

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

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Eine kurze Diskussion der React-Komponenten höherer Ordnung

vue-cli axios-Anfragemethode und domänenübergreifende Verarbeitung Probleme

jQuery implementiert die Funktion des Springens zwischen Browsern und der Übergabe von Parametern [unterstützt chinesische Schriftzeichen]

Das obige ist der detaillierte Inhalt vonFormulareingabekomponentenmethode des benutzerdefinierten Ereignisses von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!