Vier Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue

Dieser Artikel stellt hauptsächlich die vier Methoden zur Implementierung der bidirektionalen Bindung in Vue vor. Er ist sehr gut und hat Referenzwert.

1. V-Modell-Anweisung

<input v-model="text" />

Das obige Beispiel ist nur ein Syntax-Zucker, der erweitert wird zu:

<input
 :value="text"
 @input="e => text = e.target.value"
/>

2. .sync-Modifikator

<my-dialog :visible.sync="dialogVisible" />

Dies ist auch ein syntaktischer Zucker:

<my-dialog
 :visible="dialogVisible"
 @update:visible="newVisible => dialogVisible = newVisible"
/>

Meine Dialogkomponente this.$emit('update:visible', newVisible) kann bei sichtbaren Änderungen verwendet werden.

3. Modellattribut (in JSX/Rendering-Funktion)

Vue nach Version 2.2.0 ermöglicht das V-Modell benutzerdefinierter Komponenten, Dies führt dazu, dass bei der Implementierung des V-Modells in JSX/Rendering-Funktionen unterschiedliche Konfigurationen von Komponenten berücksichtigt werden müssen, was nicht immer der Fall sein kann (angenommen, das Modell der my-dialog-Komponente ist { prop: 'visible', event: 'change ' }):

{
 render(h) {
  return h('my-dialog', {
   props: { value: this.dialogVisible },
   on: { input: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Es sollte so aussehen:

{
 render(h) {
  return h('my-dialog', {
   props: { visible: this.dialogVisible },
   on: { change: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Mit dem Modellattribut können Sie jedoch seine Requisite und sein Ereignis vollständig ignorieren:

{
 render(h) {
  return h('my-dialog', {
   model: {
    value: this.dialogVisible,
    callback: newVisible => this.dialogVisible = newVisible
   }
  })
 }
}

Wird so verwendet in JSX:

{
 render() {
  return (
   <my-dialog
    {...{
     model: {
      value: this.dialogVisible,
      callback: newVisible => this.dialogVisible = newVisible
     }
    }}
   />
  )
 }
}

4. vue-better-sync Plug-in

Es gibt eine Nachfrage wie diese: Entwickeln Sie eine Prompt-Komponente, die erfordert eine Synchronisierung der Benutzereingaben. Klicken Sie auf die Schaltfläche, um das Popup-Fenster zu schließen.

Im Allgemeinen machen wir Folgendes:

<template>
 <p v-show="_visible">
  <p>完善个人信息</p>
  <p>
   <p>尊姓大名？</p>
   <input v-model="_answer" />
  </p>
  <p>
   <button @click="_visible = !_visible">确认</button>
   <button @click="_visible = !_visible">取消</button>
  </p>
 </p>
</template>
<script>
export default {
 name: &#39;prompt&#39;,
 props: {
  answer: String,
  visible: Boolean
 },
 computed: {
  _answer: {
   get() {
    return this.answer
   },
   set(value) {
    this.$emit(&#39;input&#39;, value)
   }
  },
  _visible: {
   get() {
    return this.visible
   },
   set(value) {
    this.$emit(&#39;update:visible&#39;, value)
   }
  }
 }
}
</script>

Ein oder zwei Komponenten zu schreiben ist in Ordnung, aber sobald die Größe der Komponente erweitert ist, schreiben wir in beide Richtungen Bindung kann wirklich Probleme verursachen. Um die Produktivität zu steigern, haben wir das Rad von Vue-Better-Sync, und sehen wir uns an, wie wir damit unsere Prompt-Komponente transformieren können:

<template>
 <p v-show="actualVisible">
  <p>完善个人信息</p>
  <p>
   <p>尊姓大名？</p>
   <input v-model="actualAnswer" />
  </p>
  <p>
   <button @click="syncVisible(!actualVisible)">确认</button>
   <button @click="syncVisible(!actualVisible)">取消</button>
  </p>
 </p>
</template>
<script>
import VueBetterSync from &#39;vue-better-sync&#39;
export default {
 name: &#39;prompt&#39;,
 mixins: [
  VueBetterSync({
   prop: &#39;answer&#39;, // 设置 v-model 的 prop
   event: &#39;input&#39; // 设置 v-model 的 event
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // visible 属性可用 .sync 双向绑定
  }
 }
}
</script>

Das Obige ist, was ich hoffentlich für alle zusammengestellt habe Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

jQuery+Cookie implementiert die Skin-Umschaltfunktion

JQuery implementiertes Beispiel für die Ereignisfunktion der Eingabe-Trigger-Schaltfläche

Beispiel für die Implementierung der Ajax-Verifizierung basierend auf jQuery, um zu überprüfen, ob der Benutzername verfügbar ist

Das obige ist der detaillierte Inhalt vonVier Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!