Ist der Vue-Datenfluss einseitig?

Es ist eine Einbahnstraße. Obwohl Vue über ein bidirektionales Bindungs-„V-Modell“ verfügt, folgt die Datenübertragung zwischen übergeordneten und untergeordneten Vue-Komponenten immer noch einem einseitigen Datenfluss. Die übergeordnete Komponente kann Requisiten an die untergeordnete Komponente übergeben, die untergeordnete Komponente kann diese jedoch nicht ändern Von der übergeordneten Komponente übergebene Requisiten können untergeordnete Komponenten nur über Ereignisse über Datenänderungen informieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

vue ist ein einseitiger Datenfluss. Die Datenflussrichtung verläuft von oben nach unten, von der übergeordneten Komponente zur untergeordneten Komponente.

Verwechseln Sie sich nicht mit der bidirektionalen Datenbindung von Vue. Die bidirektionale Datenbindung bezieht sich auf die Rendering-Beziehung zwischen der Ansicht und der Vorlage, nicht auf den Datenfluss a Single Für den Datenfluss kann die übergeordnete Komponente Requisiten an die untergeordnete Komponente übergeben, die untergeordnete Komponente kann jedoch die von der übergeordneten Komponente übergebenen Requisiten nicht ändern. Die untergeordnete Komponente kann die übergeordnete Komponente nur über Ereignisse über Datenänderungen informieren.

1. Einseitiger Datenfluss:

Alle Requisiten bilden eine unidirektionale Abwärtsbindung zwischen ihren übergeordneten und untergeordneten Requisiten: Aktualisierungen der übergeordneten Requisiten fließen nach unten zu den untergeordneten Komponenten, umgekehrt jedoch nicht. Dadurch wird verhindert, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert, wodurch der Datenfluss Ihrer Anwendung schwer verständlich wird.

Darüber hinaus werden jedes Mal, wenn sich die übergeordnete Komponente ändert, alle Requisiten in der untergeordneten Komponente auf die neuesten Werte aktualisiert. Das bedeutet, dass Sie Requisiten innerhalb einer untergeordneten Komponente nicht ändern sollten. Wenn Sie dies tun, ändert sich auch der Status der übergeordneten Komponente.

2, Prop wird als Referenz übergeben:

Beachten Sie, dass Objekte und Arrays in JavaScript als Referenz übergeben werden. Ändern Sie also für ein Array oder eine Objekttyp-Requisite das Objekt in der untergeordneten Komponente. Andernfalls wird das Array selbst beeinflusst den Zustand der übergeordneten Komponente.

Umfassendes Verständnis des unidirektionalen Datenflusses von Vue

1 Das V-Modell wird für Eingabeelemente verwendet. Das V-Modell ist bei Verwendung der bidirektionalen Bindung sehr ähnlich (eigentlich ...). , aber Vue ist ein einzelner Datenfluss und das V-Modell ist nur syntaktischer Zucker:

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

Die erste Codezeile ist eigentlich nur syntaktischer Zucker für die zweite Zeile. Dann kann die zweite Codezeile wie folgt abgekürzt werden:

<input :value="something" @input="something = $event.target.value" />

Um diese Codezeile zu verstehen, müssen Sie zunächst wissen, dass das Eingabeelement selbst ein oninput-Ereignis hat, ähnlich wie onchange Der Inhalt des Eingabefelds ändert sich, Oninput wird ausgelöst und der neueste Wert wird über $event an etwas übergeben.

Wir beobachten die beiden Codezeilen von Syntaxzucker und Originalsyntax sorgfältig und können eine Schlussfolgerung ziehen: Beim Hinzufügen des V-Modell-Attributs zum Eingabeelement wird der Wert standardmäßig als Attribut des Elements verwendet , und das „Eingabe“-Ereignis wird als Echtzeit-Übergabewert-Triggerereignis verwendet. Das V-Modell wird für Komponenten verwendet. Das V-Modell kann nicht nur für Eingaben, sondern auch für Komponenten verwendet werden . Schauen Sie sich die Demo auf der offiziellen Website an.

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
  template: &#39;\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  &#39;,
  props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf(&#39;.&#39;) === -1
            ? value.length
            : value.indexOf(&#39;.&#39;) + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
      this.$emit(&#39;input&#39;, Number(formattedValue))
    }
  }
})

Wenn Sie die Antworten auf diese beiden Fragen kennen, dann herzlichen Glückwunsch, dass Sie das V-Modell wirklich beherrschen. Wenn Sie es nicht verstehen, können Sie sich diesen Code ansehen:

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

Also, wenn Sie das V-Modell-Attribut hinzufügen zu einer Komponente hinzufügen. Standardmäßig wird der Wert als Eigenschaft der Komponente verwendet und der Eingabewert wird als Ereignisname verwendet, wenn Ereignisse an die Komponente gebunden werden. Dies ist besonders nützlich beim Schreiben von Komponenten.

3. Nachteile und Lösungen des V-Modells

Beim Erstellen allgemeiner Komponenten wie Kontrollkästchen oder Optionsfelder ist das V-Modell nicht einfach zu verwenden.

<input type="checkbox" v-model="something" />

v-model stellt uns das Wertattribut und das Oninput-Ereignis zur Verfügung. Was wir jedoch benötigen, ist nicht das Wertattribut, sondern das aktivierte Attribut. Wenn Sie auf dieses Optionsfeld klicken, wird das Oninput-Ereignis nicht ausgelöst Nur Onchange-Ereignis auslösen.

Da das V-Modell nur für Eingabeelemente verwendet wird, ist diese Situation leicht zu lösen:

<input type="checkbox" :checked="value" @change="change(value, $event)"

Wenn das V-Modell für Komponenten verwendet wird:

<checkbox v-model="value"></checkbox>

Vue.component(&#39;checkbox&#39;, {
  tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
  props: [&#39;value&#39;],
  data: function () {
        return {
            //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
            currentValue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentValue = $event.target.checked;
      this.$emit(&#39;input&#39;, this.currentValue);  
    }
})

In der Version Vue 2.2 können Sie beim Definieren von Komponenten die Modelloption übergeben um Requisite/Ereignis anzupassen.

4. Vue-Komponentendatenfluss

Aus der obigen Analyse des V-Modells können wir verstehen, dass die bidirektionale Datenbindung Änderungen an Eingabeelementen (Eingabe, Text usw.) basierend auf der unidirektionalen Bindung hinzufügt. (Eingabe-)Ereignis zum dynamischen Ändern des Modells und der Ansicht, dh durch Auslösen ($emit) des Ereignisses der übergeordneten Komponente zum Ändern des MV, um den Effekt von MVVM zu erzielen. Die Datenübertragung zwischen Vue-Komponenten erfolgt unidirektional, das heißt, die Daten werden immer von der übergeordneten Komponente an die untergeordnete Komponente weitergegeben. Die untergeordnete Komponente kann ihre eigenen Daten intern verwalten, hat jedoch nicht das Recht, die Daten zu ändern Wird von der übergeordneten Komponente an ihn übergeben. Wenn der Autor dies versucht, meldet vue einen Fehler. Dies geschieht zur besseren Entkopplung zwischen Komponenten. Während der Entwicklung können mehrere Unterkomponenten vorhanden sein, die von bestimmten Daten der übergeordneten Komponente abhängen löst alle von diesen Daten abhängigen Daten aus. Die untergeordnete Komponente ändert sich also Vue empfiehlt untergeordneten Komponenten nicht, die Daten der übergeordneten Komponente zu ändern. Das direkte Ändern von Requisiten führt zu einer Warnung. Das Flussdiagramm sieht wie folgt aus:

Wenn Sie also Requisiten in einer untergeordneten Komponente ändern möchten, verwenden Sie die untergeordnete Komponente als übergeordnete Komponente, also gibt es

• 1 Definieren Sie eine lokale Variable und initialisieren Sie sie mit dem Wert von prop.
• 2. Definieren Sie eine berechnete Eigenschaft, verarbeiten Sie den Prop-Wert und geben Sie ihn zurück.

【Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonIst der Vue-Datenfluss einseitig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!