Wie erstelle ich ein benutzerdefiniertes V-Model für eine Vue-Komponente?

Um ein benutzerdefiniertes V-Model in Vue 3 zu erstellen, müssen Sie die ModelValue-Eigenschaft definieren und das Update: modelValue-Ereignis abgeben. 2. Sie können den benutzerdefinierten Prop-Namen über V-Model: Titel angeben. 3.. VUE 2 verwendet standardmäßig Wert- und Eingabeereignisse. Sie können ihn jedoch in ModellValue und Aktualisierung: modelValue durch die Modelloption ändern, um mit Vue 3 kompatibel zu sein. 4. Erklären Sie immer Emits in Vue 3, um Klarheit und Überprüfung zu gewährleisten; 5. Vermeiden Sie das direkte Ändern der Prop und das Update sollte durch Ereignisse ausgelöst werden, sodass die Komponente eine bow-Wege-Bindung wie den nativen Eingang unterstützt.

Durch das Erstellen eines benutzerdefinierten v-model auf einer Vue-Komponente können Sie Ihre Komponenten nahtlos mit der Zwei-Wege-Bindungssyntax von Vues funktionieren. Hier erfahren Sie, wie Sie es sowohl in Vue 3 als auch in Vue 2 (mit geringfügigen Unterschieden) richtig machen können.

✅ Verstehen, wie V-Model funktioniert

Standardmäßig ist v-model in einer Komponente syntaktischer Zucker für:

• Bindung einer modelValue -Requisite
• Ausgabe eines update:modelValue -Ereignis, wenn sich der Wert ändert

Also:

 <MyInput v-model = "text" />

entspricht:

 <MyInput 
  : modelValue = "text" 
  @update: modelValue = "text = $ event" " 
/>

? ️ Erstellen eines benutzerdefinierten V-Modells (Vue 3)

1. Definieren Sie die Komponente

 <!-CustomInput.vue->
<Semplate>
  <Eingabe
    : value = "modelValue"
    @input = "$ emit (&#39;update: modelValue&#39;, $ event.target.value)"
    Typ = "Text"
  />
</template>

<Script>
Standard ausführen {
  Name: &#39;CustomInput&#39;,
  Requisiten: {
    modelValue: String // oder welcher Typ, den Sie erwarten
  },
  Emits: [&#39;Update: modelValue&#39;]
}
</script>

✅ Hinweis: In Vue 3 sollten Sie emittierte Ereignisse mithilfe der Option emits deklarieren.

2. Verwenden Sie es mit V-Model

 <Semplate>
  <div>
    <CustomEInput v-Model = "message" />
    <p> Nachricht: {{message}} </p>
  </div>
</template>

<Script>
CustomInput von &#39;./custominput.vue&#39; importieren &#39;

Standard ausführen {
  Komponenten: {CustomInput},
  Data () {
    zurückkehren {
      Nachricht: &#39;Hallo&#39; &#39;
    }
  }
}
</script>

? Benutzerdefinierter V-Model-Name (Fortgeschrittene)

Sie können den modelValue in einem benutzerdefinierten Prop-Namen mit der model in VUE 2 oder dem v-model Argument in Vue 3 ändern.

Beispiel: Verwenden von v-model:title für eine Requisite namens title

 <!-CustomTitleinput.vue->
<Semplate>
  <Eingabe
    : value = "title"
    @Input = "$ emit (&#39;update: title&#39;, $ event.target.value)"
    Typ = "Text"
  />
</template>

<Script>
Standard ausführen {
  Requisiten: [&#39;Titel&#39;],
  Emits: [&#39;Update: Titel&#39;]
}
</script>

Verwenden Sie es jetzt wie:

 <CustomTitLeinput V-Model: title = "boottitle" />

Dies bindet an die title -Requisite und hört auf update:title zu.

? Sie können sogar eine Standard v-model Prop über die model in Skripten (Vue 3) definieren, aber das oben oben ist klarer.

? Vue 2 -Version (geringfügige Unterschiede)

In VUE 2 verwendet v-model in einer Komponente standardmäßig das value Requisitenereignis und input - nicht modelValue .

Für die Kompatibilität:

 <!-Vue 2 CustomInput.vue->
<Semplate>
  <Eingabe
    : value = "value"
    @Input = "$ emit (&#39;Input&#39;, $ event.target.value)"
    Typ = "Text"
  />
</template>

<Script>
Standard ausführen {
  Requisiten: [&#39;Wert&#39;]
}
</script>

Wenn Sie modelValue in Vue 2 verwenden möchten (um sich mit Vue 3 auszurichten), können Sie es anpassen:

 Standard ausführen {
  Modell: {
    Prop: 'modelValue',
    Ereignis: 'Update: modelValue' '
  },
  Requisiten: ['modelValue']
}

Dann funktioniert es wie Vue 3:

 <CustomyInput v-Model = "Text" />

✅ Best Practices

• Erklären Sie immer Ihre emits in Vue 3 für Klarheit und Validierung.
• Verwenden Sie modelValue und update:modelValue als Standard in Vue 3.
• Für mehrere Modelle (z. B. v-model:title , v-model:content ) verwenden Sie die Argumentsyntax.
• Vermeiden Sie die direkte Mutation direkt - geben Sie stattdessen Aktualisierungen ab.

Passen Sie im Grunde genommen einfach das von v-model erwartete Prop- und Emit-Muster an, und Ihre Komponente verhalten sich wie eine native Eingabe. Nicht Magie - nur Konvention.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein benutzerdefiniertes V-Model für eine Vue-Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!