So implementieren Sie eine bidirektionale 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-model Der Befehl

<input v-model="text" />

Das obige Beispiel ist nur ein Syntaxzucker, der erweitert wird zu:

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

2. .sync-Modifikator

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

Dies ist auch eine Syntax Zucker, abgezogen ist:

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

meine-Dialog-Komponente kann this.$emit('update:visible', newVisible) werden, wenn sich sichtbare Veränderungen ergeben.

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 }
  })
 }
}

Allerdings, Mit dem Modellattribut ist es durchaus möglich, den Zweck zu erreichen, sich nicht um Requisiten und Ereignisse zu kümmern:

{
 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. vue-better-sync Plug-in

Dafür besteht Bedarf: Entwickeln Sie eine Prompt-Komponente, die eine Synchronisierung der Benutzereingaben erfordert und auf die Schaltfläche klickt, 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>

Es ist in Ordnung, ein oder zwei Komponenten zu schreiben, aber die Komponentengröße Nach der Erweiterung kann das Schreiben von bidirektionalen Bindungen wirklich Probleme verursachen. Um die Produktivität freizusetzen, 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>

vue-better-sync vereinheitlicht die Art und Weise, wie v-model und .sync Daten weitergeben. Sie benötigen nur this.actual${PropName} = newValue oder this.sync${PropName}(newValue) , um neue Daten an die übergeordnete Komponente zu übergeben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Vue-Funktion zum Zuschneiden von Bildern und Hochladen auf den Server

So konfigurieren Sie Sass im Vue-Gerüst

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine bidirektionale Bindung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!