Detaillierte Erklärung, wie Requisiten Parameter in vue.js übergeben

Ich werde Ihnen eine detaillierte Analyse des relevanten Wissens und der Problemlösungsmethoden für die Übergabe von Parametern in vue.js geben. Freunde, die es benötigen, können darauf verweisen.

Dieser Artikel verwendet Demobeispiele, um Ihnen eine detaillierte Analyse der Verwendung der von Requisiten übergebenen Parameter und Lösungen für aufgetretene Probleme zu geben. Im Folgenden finden Sie den vollständigen Inhalt.

Vor einiger Zeit habe ich mit Vue ein Backend-Managementsystem aufgebaut, bei dem jede Seite eine Tabelle zur Anzeige von Informationen benötigt. Natürlich habe ich darüber nachgedacht, die Tabelle zu extrahieren und in eine öffentliche Komponente umzuwandeln und die Daten von verschiedenen Seiten zum Rendern weiterzugeben, um den Zweck der Wiederverwendung zu erreichen.

Demo-Adresse

1. Problemerkennung

In der übergeordneten Komponente die Daten, die an die übergeben werden müssen Die Tabellenkomponente ist die Inhaltsdatentabelle der Tabelle, die Seitendatenseite der Tabelle.

<p>
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

Wobei tableData ein Array-Objekt ist, das ein Array ist, das aus allen Datenobjekten besteht, die in der Tabelle angezeigt werden müssen. Und pageInfo ist ein Objektobjekt, das Tabellenseiteninformationen enthält. Initialisieren Sie die beiden Datenpaare in der übergeordneten Komponente wie folgt in der Form

tableData：［］，
pageInfo: {
 current: 1, // 当前是第几页
 total: 100, // 数据对象的总数
 size: 20 // 每页显示的数量
}

. Gemäß der offiziellen Dokumentation ist prop unidirektional gebunden und prop sollte nicht innerhalb der untergeordneten Komponente geändert werden. Der Grund, warum ich den Drang verspüre, die Daten in prop zu ändern, liegt hauptsächlich darin, dass die Unterkomponente sie nach der Übergabe von prop als Anfangswert als lokale Daten verwenden möchte. Für diese Situation besteht die offizielle Anweisung darin, eine lokale Variable zu definieren und sie mit dem Wert von prop zu initialisieren:

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

Dann werden gemäß der offiziellen Dokumentation alle Props der untergeordneten Komponente jedes Mal aktualisiert, wenn die übergeordnete Komponente aktualisiert wird wird aktualisiert. Die Informationen von tableData und pageInfo werden asynchron vom Server über die API abgerufen:

{
 error: 0,
 msg: "调用成功.",
 data: {
  restrictioninfo: [...],
  total: 42
 }
}

Daher muss die übergeordnete Komponente beim Abrufen der Daten den in der untergeordneten Komponente übergebenen Wert ändern:

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;

Es liegt auf der Hand, dass zu diesem Zeitpunkt der Wert in der Unterkomponente auf den vom Server zurückgegebenen Wert aktualisiert werden sollte, aber die Gesamtzahl der Unterkomponentenseiten wurde aktualisiert, aber die Tabellendaten sind während der Initialisierung immer noch das leere Array. (Schwarzes Fragezeichen???)

.

2. Zuweisung und Bindung

Zuerst muss ich herausfinden, wo die Daten schief gelaufen sind, also habe ich eine Demo erstellt, um sie zu lokalisieren es. Frage.

Sehen Sie sich zunächst die Anfangswerte jedes Elements in der übergeordneten Komponente und der untergeordneten Komponente an:

Dann, wenn nur der Verweis auf das Array in der Die übergeordnete Komponente wird geändert, Sie können die untergeordnete Komponente sehen. Das Props-Array der Komponente ändert sich entsprechend, das in der Unterkomponente gebundene Array ändert sich jedoch nicht entsprechend

Daher ist es Es kann festgestellt werden, dass das Problem in diesem Schritt liegt

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

Um die Grundursache des Problems herauszufinden, müssen Sie das Reaktionsprinzip im Vue-Dokument im Detail verstehen.

"In der Datenoption der Vue-Instanz durchläuft Vue alle Eigenschaften dieses Objekts und verwendet Object.defineProperty, um alle diese Eigenschaften in Getter/Setter umzuwandeln", „Jede Komponenteninstanz verfügt über ein entsprechendes Watcher-Instanzobjekt, das die Eigenschaften während des Komponentenrenderingprozesses als Abhängigkeiten aufzeichnet. Wenn später der Setter der Abhängigkeit aufgerufen wird, wird der Watcher zur Neuberechnung aufgefordert, wodurch die zugehörigen Komponenten aktualisiert werden.“ Das einfache Verständnis ist, dass Vue vm.$data.a in der Datenoption in zwei Richtungen an vm.a im DOM bindet, das heißt, wenn sich das eine ändert, ändert sich auch das andere. Im Vue-Quellcode wird es durch die Funktion defineReactive$$1 implementiert:

Im Unterabschnitt werden jedoch hauptsächlich die Get- und Set-Methoden von Object.defineProperty verwendet um eine bidirektionale Bindung zu erreichen. In der Unterkomponente sind die Pros-Daten und die $data der Unterkomponente folgendermaßen verbunden:

tData: this.tableData

Die Abfrage des Vue-Quellcodes zeigt, dass es nur eine Zuordnung zwischen this.tableData und tData gibt , also „=“ Beziehung

Die obige initData-Funktion wird beim Erstellen der Komponente ausgeführt, sodass sie beim Erstellen nur einmal ausgeführt wird. Aus diesem Grund heißt es in der offiziellen Dokumentation „als Anfangswert übergeben“, da die Ausführung nur einmal erfolgt. Wenn die Komponente erstellt wird, besteht keine Beziehung zwischen this.tableData und tData. Änderungen in einer Komponente führen nicht zu Änderungen in der anderen. Natürlich ist diese Aussage nicht korrekt, da wir oben die von der übergeordneten Komponente übergebene Summe dynamisch ändern und sich auch die untergeordneten Komponenten „gleichzeitig“ ändern. Was ist los? ?

3. Illusionen durch Referenztypen

Natürlich müssen wir immer noch von den offiziellen Dokumenten ausgehen, um dieses Problem zu lösen. Im Dokument steht so ein Tipp:

这里就需要理解引用类型的概念，引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示：

var a = new Object();

当操作时，需要先从栈中读取内存地址，然后再延指针找到保存在堆内存中的值再操作。

a.name = 'xz';

引用类型变量赋值，本质上赋值的是存储在栈中的指针，将指针复制到栈中未新变量分配的空间中，而这个指针副本和原指针指向存储在堆中的同一个对象；赋值操作结束后，两个变量实际上将引用同一个对象。因此，在使用时，改变其中的一个变量的值，将影响另一个变量。

var b = a;

在了解了引用类型之后，我们在来看看上文提到的动态改变传入子组件前后内存中的情况：

me.tableData = Json.data.restrictioninfo;
me.pageInfo.total = Json.data.total;
========================================
props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

首先对tableData的改变是改变了其引用的指针，而对pageInfo则改变了其中一个属性的值，因此动态改变前：

动态改变后：

这样就解释了为什么子组件页面的总数更新了，但table数据依然是初始化时的空数组。因为引用类型的存在，我们动态改变父组件传入的total,子组件也"随之"改变了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在jQuery中如何实现点击DIV触发点击CheckBox

使用JS如何实现点击复选框修改显示状态

在Vue中标准的处理方法（详细教程）

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Requisiten Parameter in vue.js übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!