Vier Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue-js-Tutorial-php.cn

Vier Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue

亚连

Freigeben： 2018-05-29 17:11:15

Original

2682 Leute haben es durchsucht

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" />

Nach dem Login kopieren

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

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

Nach dem Login kopieren

2. .sync-Modifikator

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

Nach dem Login kopieren

Dies ist auch ein syntaktischer Zucker:

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

Nach dem Login kopieren

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(&#39;my-dialog&#39;, {
   props: { value: this.dialogVisible },
   on: { input: newVisible => this.dialogVisible = newVisible }
  })
 }
}

Nach dem Login kopieren

Es sollte so aussehen:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Wird so verwendet in JSX:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!