So bedienen Sie die Datenübertragung von Eltern-Kind-Komponenten der Vue-Formularklasse

Dieses Mal zeige ich Ihnen, wie Sie die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten der Vue-Formularklasse durchführen und welche Vorsichtsmaßnahmen beim Betrieb der Datenübertragung zwischen übergeordneten und untergeordneten Komponenten der Vue-Formularklasse gelten Ein praktischer Fall, werfen wir einen Blick darauf.

Wenn Sie Vue.js für die Projektentwicklung verwenden, verwenden Sie zwangsläufig eine komponentenbasierte Entwicklungsmethode. Diese Methode bringt zwar einen gewissen Komfort für Entwicklung und Wartung, wenn sie jedoch Daten und Daten zwischen Komponenten umfasst Zustandsübertragungsinteraktion ist eine problematische Sache, insbesondere wenn es sich um eine Seite mit vielen Formularen handelt.

Hier werde ich meine üblichen Verarbeitungsmethoden aufzeichnen. In diesem Artikel wird die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten hauptsächlich über Vuex erläutert .

Dasselbe wie die im Dokument angegebene Lösung. Die übergeordnete Komponente überträgt Daten hauptsächlich über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente überträgt Daten hauptsächlich über den Trigger $ an die übergeordnete Komponente emit(), nur im Gebrauch Es wird etwas anders sein.

1. Übergeben Sie grundlegende Typdaten

Wenn die Unterkomponente weniger Inhalt hat, werden grundlegende Typdaten direkt übergeben, normalerweise String, Zahl, Boolesche drei Typen.

Sehen wir uns zunächst ein Beispiel an:

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </p>
</template>
<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

Binden Sie eine Methode „changeName“ an das Eingabeereignis der Unterkomponente. Bei jeder Ausführung dieser Methode wird die benutzerdefinierte Ereigniseingabe ausgelöst und der Wert von Das Eingabefeld wird geändert.

Die übergeordnete Komponente bindet einen Wert über die V-Model-Direktive, um die von der untergeordneten Komponente übergebenen Daten zu empfangen. Dies bedeutet jedoch nur, dass die übergeordnete Komponente auf die Daten der untergeordneten Komponente reagiert. Wenn Sie möchten, dass die untergeordnete Komponente auf die von der übergeordneten Komponente übergebenen Daten reagiert, müssen Sie einen Props-Attributwert für die untergeordnete Komponente und dieses Attribut definieren muss ein Wert sein und kann nicht mit anderen Worten geschrieben werden.

V-Modell ist eigentlich ein syntaktischer Zucker. Weitere Informationen finden Sie in der Formulareingabekomponente, die benutzerdefinierte Ereignisse verwendet.

2. Übergeben Sie Referenztypdaten

Wenn die Unterkomponente viel Inhalt enthält, z. B. die Unterkomponente hat mehrere Formularelemente, falls noch welche vorhanden sind. Wenn Sie wie oben beschrieben einen Wert an jedes Formularelement binden, müssen Sie eine Menge wiederholten Code schreiben. Was zu diesem Zeitpunkt normalerweise übergeben wird, ist ein Objekt. Das Grundprinzip der Wertübergabe bleibt unverändert, die Schreibmethode unterscheidet sich jedoch geringfügig.

Schauen wir uns zuerst den Code an:

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年龄：<input type="text" v-model="form.age">
    </label>
    <label>
      地点：<input type="text" v-model="form.address">
    </label>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流，通过触发 update 事件绑定 formData，
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候，需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

props ist ein unidirektionaler Datenfluss. Wenn wir die Eigenschaften in props bidirektional binden müssen, müssen wir bitte den .sync-Modifikator verwenden Weitere Informationen finden Sie im .sync-Modifikator, der hier nicht beschrieben wird.

Hier muss beachtet werden, dass Requisiten nicht direkt in Vue geändert werden können. Wenn wir also Werte an die übergeordnete Komponente übergeben möchten, müssen wir weiterhin nur die Werte in Daten ändern als Vermittler für den Anruf zwischen Eltern und Kind fungieren.

Wenn wir außerdem eine Vorschau der ursprünglich von der übergeordneten Komponente übergebenen Daten anzeigen möchten, müssen wir die Requisitenänderungen durch watch überwachen und den Wert übergeben, wenn die untergeordnete Komponente initialisiert wird.

Hinweis: Ich habe this.$emit('update:formData', this.form) in die Unterkomponente eingefügt. Der Grund besteht darin, das Laden jeder Eingabe zu vermeiden. Das benutzerdefinierte Ereignis wird ausgelöst im Eingabeereignis des Tags, aber die Voraussetzung beim Schreiben ist, dass die übergeordnete und untergeordnete Komponente dasselbe Objekt teilen müssen.

Dies ist, was im obigen Code gilt: Wenn formData.sync="form" verwendet wird, um den Wert in der übergeordneten Komponente zu binden, ist form ein Objekt und das benutzerdefinierte Ereignis in der untergeordneten Komponente wird dadurch ausgelöst. $emit(' update:formData', this.form) , this.form muss ebenfalls ein Objekt sein.

Hier ist auch zu beachten, dass diese Schreibmethode vermieden werden sollte, wenn mehrere Unterkomponenten ein Objekt verwenden, da sich auch andere Unterkomponenten ändern, wenn eine Komponente die Daten dieses Objekts ändert entsprechend. .

Wenn ich es also verwende, ordne ich jeder Unterkomponente ein eigenes Objekt zu, wie zum Beispiel:

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

Dies sind die in der übergeordneten Komponente definierten Daten. Natürlich der Name wird nicht so gewählt.

Ende

Es gibt nicht viel zu sagen, ich bin immer noch in der Phase der Verwendung von Vue und weiß nicht genug darüber Ich möchte unbedingt den Quellcode lesen, aber ich denke nur darüber nach ... Wenn Sie denken, dass etwas nicht stimmt, sagen Sie es einfach und lassen Sie uns miteinander kommunizieren.

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der Verwendung von JS zur Bestimmung des in einer Zeichenfolge enthaltenen Inhalts

JS+HTML5 realbindende Partikelanimation von Mausereignissen

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die Datenübertragung von Eltern-Kind-Komponenten der Vue-Formularklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!