Beispiel für die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten der Vue-Formularklasse

In diesem Artikel wird hauptsächlich das Beispiel für die Datenübertragung zwischen Eltern und Kindern der Vue-Formularklasse vorgestellt. Jetzt kann ich es mit Ihnen teilen.

Verwenden Sie Vue .js für Projekte Die Entwicklung wird zwangsläufig eine komponentenbasierte Entwicklungsmethode verwenden. Diese Methode bringt zwar eine gewisse Bequemlichkeit für die Entwicklung und Wartung mit sich, aber wenn es sich um Daten- und Statusübertragungsinteraktionen zwischen Komponenten handelt, ist dies insbesondere eine problematische Sache Es handelt sich um eine Seite mit viele Formen.

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 .

Wie bei der im Dokument angegebenen Lösung überträgt die übergeordnete Komponente Daten hauptsächlich über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente überträgt Daten hauptsächlich über den Trigger $emit() an die übergeordnete Komponente. Es gibt jedoch solche einige Unterschiede in der Verwendung.

1. Übergeben Sie grundlegende Typdaten

Wenn die Unterkomponente weniger Inhalt hat, werden grundlegende Typdaten direkt übergeben. Normalerweise gibt es drei Typen: String, Number und Boolean.

Schauen 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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;
        }
      }
    }
  }
</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: &#39;&#39;
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit(&#39;input&#39;, e.target.value)
      }
    }
  }
</script>

Binden Sie das Eingabeereignis von Die untergeordnete Komponente definiert eine Methode „changeName“. Jedes Mal, wenn diese Methode ausgeführt wird, wird die benutzerdefinierte Ereigniseingabe ausgelöst und der Wert des Eingabefelds übergeben.

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. Referenztypdaten übergeben

Wenn die Unterkomponente viel Inhalt enthält, z Wie viele Unterkomponenten gibt es beispielsweise? Wenn Sie wie oben beschrieben immer noch einen Wert an jedes Formularelement binden, müssen Sie viel wiederholten Code schreiben. Was zu diesem Zeitpunkt normalerweise übergeben wird, ist ein Objekt. Das Grundprinzip der Wertübergabe bleibt dasselbe, 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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;,
          age: &#39;21&#39;
        }
      }
    }
  }
</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: &#39;&#39;,
          age: &#39;&#39;,
          address: &#39;&#39;
        }
      }
    },
    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(&#39;update:formData&#39;, this.form)
    }
  }
</script>

props ist ein One- Wenn wir Eigenschaften in Requisiten bidirektional binden müssen, müssen wir den Modifikator .sync verwenden, der hier nicht beschrieben wird.

Hier muss beachtet werden, dass Requisiten nicht direkt in Vue geändert werden können. Wenn wir also einen Wert an die übergeordnete Komponente übergeben möchten, müssen wir den Wert in Daten ändern Wird nur als Anruf zwischen Eltern und Kind verwendet. Der Mittelsmann existiert.

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 untergeordneten Komponente ein eigenes Objekt zu, wie zum Beispiel:

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

Das ist natürlich im übergeordneten Element , werden die in der Komponente definierten Daten nicht auf diese Weise benannt.

Ende

Ich bin immer noch in der Phase der Verwendung von Vue und weiß es nicht Genug der zugrunde liegenden Dinge, ich möchte auch unbedingt den Quellcode lesen, aber ich denke immer nur darüber nach ... Wenn Sie denken, dass etwas nicht stimmt, sagen Sie es einfach, jeder kann miteinander kommunizieren.

Verwandte Empfehlungen:

Anleitung für den Einstieg in Vue-Formulare

Das obige ist der detaillierte Inhalt vonBeispiel für die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten der Vue-Formularklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!