Zusammenfassung der bidirektionalen Bindungsmethoden in Vue

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Implementierung der bidirektionalen Bindung von Vue vorstellen sehen.

1. V-Modell-Befehl

<input v-model="text" />

Das obige Beispiel ist nur ein syntaktischer Zucker, erweitert zu :

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

2. .sync-Modifikator

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

Dies ist auch ein Syntax-Zucker, abgeschält lautet er:

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

My-Dialog-Komponente kann this.$emit('update:visible', newVisible) bei sichtbaren Änderungen verwendet werden.

3. Modellattribut (in JSX/Rendering-Funktion)

Vue ermöglicht die Definition benutzerdefinierter Komponenten nach Version 2.2.0 s V-Modell, was dazu führt, 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 (wenn das Modell der my-dialog-Komponente { prop: 'sichtbar', Ereignis: 'ändern' }):

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

Dies sollte der Fall sein:

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

Allerdings können Sie bei Verwendung des Modellattributs seine Requisite und sein Ereignis vollständig ignorieren:

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

So verwendet in JSX:

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

4 Beispiel: Entwickeln Sie eine Prompt-Komponente, die eine Synchronisierung der Benutzereingaben erfordert. 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: 'prompt',
 props: {
  answer: String,
  visible: Boolean
 },
 computed: {
  _answer: {
   get() {
    return this.answer
   },
   set(value) {
    this.$emit('input', value)
   }
  },
  _visible: {
   get() {
    return this.visible
   },
   set(value) {
    this.$emit('update:visible', 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 Vue-Better-Sync-Rad. Sehen wir uns an, wie es zur Transformation unserer Prompt-Komponente verwendet werden kann:

<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 'vue-better-sync'
export default {
 name: 'prompt',
 mixins: [
  VueBetterSync({
   prop: 'answer', // 设置 v-model 的 prop
   event: 'input' // 设置 v-model 的 event
  })
 ],
 props: {
  answer: String,
  visible: {
   type: Boolean,
   sync: true // visible 属性可用 .sync 双向绑定
  }
 }
}
</script>

vue-better-sync vereint V-Model und .sync Um Daten zu übertragen, müssen Sie lediglich

oder

neue Daten an die übergeordnete Komponente übergeben.

GitHub: fjc0k/vue-better-sync this.actual${PropName} = newValue this.sync${PropName}(newValue) 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 zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Aktivieren des aktuellen Routings mit Vue

nodejs generiert QR-Code ( das einfachste)

Das obige ist der detaillierte Inhalt vonZusammenfassung der bidirektionalen Bindungsmethoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!