So übergeben Sie Daten zwischen vue.js-Komponenten

Vorwort

Komponenten sind eine der leistungsstärksten Funktionen von vue.js, und die Bereiche der Komponenteninstanzen sind unabhängig voneinander, was bedeutet, dass Daten zwischen verschiedenen Komponenten nicht aufeinander verweisen können. Die Übertragung von Daten ist ebenfalls zu einem wichtigen Wissenspunkt für Komponenten geworden.

Komponenten

Es gibt unterschiedliche Beziehungen zwischen Komponenten. Die Beziehung zwischen Vater und Sohn und Bruder (diejenigen, die nicht Vater und Sohn sind, werden vorübergehend Brüder genannt).

Originalautor: Lin ist die übergeordnete Komponente, Komponente B ist die Unterkomponente.

Bei direkter Verwendung der Vaterkomponente:

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件！&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})

Die Seite wird gerendert: Ich bin die untergeordnete Komponente von Vater!

<div id="app"><father></father></div>

Die Vaterkomponente verwendet die untergeordnete Komponente in der Vorlage, ist also die übergeordnete Komponente, und die untergeordnete Komponente wird verwendet, sodass die untergeordnete Komponente die untergeordnete Komponente ist.

Geschwisterkomponenten

Zwei Komponenten, die nicht aufeinander verweisen, sind Geschwisterkomponenten.

Bei Verwendung der Komponente:

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})

Die Seite wird gerendert:

<div id="app"><brother1></brother1><brother2></brother2></div>

Ich bin großer Bruder

Ich bin der kleine Bruder

Prop

Wenn eine untergeordnete Komponente die Daten der übergeordneten Komponente verwenden möchte, müssen wir die von der übergeordneten Komponente übergebenen Daten abrufen die props-Option der untergeordneten Komponente. Im Folgenden verwende ich das Format in der .vue-Datei, um das Beispiel zu schreiben.

So übergeben Sie Daten

Referenzieren Sie die untergeordnete Komponente child.vue in der übergeordneten Komponente Father.vue und übergeben Sie den Wert von name an die untergeordnete Komponente.

Deklarieren Sie die Daten, die erwartet werden, in der Option props in der untergeordneten Komponente child.vue

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>

Dann in die Seite Es wird gerendert: Hallo Linxin

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>

Einseitiger Datenfluss

Wenn sich der Name der übergeordneten Komponente ändert, aktualisiert die untergeordnete Komponente automatisch die Ansicht. Aber in untergeordneten Komponenten möchten wir Requisiten nicht ändern. Wenn Sie diese Daten ändern müssen, können Sie die folgende Methode verwenden:

Methode 1: Weisen Sie prop einer lokalen Variablen zu und ändern Sie dann die lokale Variable, wenn Sie sie ändern müssen, ohne die prop zu beeinflussen

Methode 2: Requisite in berechneten Eigenschaften verarbeiten

export default {data(){newMessage: null  },props: ['message'],created(){this.newMessage = this.message;}}

Benutzerdefiniertes Ereignis

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

Requisite ist unidirektional gebunden: Wann Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden sie an die untergeordnete Komponente übertragen, nicht jedoch umgekehrt. Das Ändern des Prop-Werts einer untergeordneten Komponente wird nicht an die übergeordnete Komponente zurückgegeben, um die Ansicht zu aktualisieren. Wie kommunizieren untergeordnete Komponenten mit übergeordneten Komponenten?

Das ist eine benutzerdefinierte Veranstaltung. Durch Abhören des benutzerdefinierten Ereignisses in der übergeordneten Komponente $on(eventName) führt die übergeordnete Komponente den entsprechenden Vorgang aus, wenn $emit(eventName) in der untergeordneten Komponente das benutzerdefinierte Ereignis auslöst.

Wenn Sie beispielsweise die Anzeige einer Popup-Unterkomponente in der übergeordneten Komponente steuern, weisen Sie die übergeordnete Komponente nach dem Klicken auf „Schließen“ in der Unterkomponente an, sie auszublenden, und die übergeordnete Komponente führt dann den Vorgang aus Vorgang zum Ausblenden des Popup-Fensters.

In der untergeordneten Komponente dialog.vue:

<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
        // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>

Dadurch wird eine gegenseitige Kommunikation zwischen übergeordneten und untergeordneten Komponenten erreicht.

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>

Vuex

Die obigen Beispiele basieren alle auf den Komponenten der Eltern-Kind-Beziehung, aber für andere Beziehungsebenen ist die Implementierung umständlicher. Dann kann Vuex Ihnen besser dabei helfen, zwischen verschiedenen Komponenten in Echtzeit zu kommunizieren. Bezüglich Vuex können Sie sich meinen anderen Artikel ansehen: Vuex modularisiert die Statusverwaltung von To-Do-Elementen

Zusammenfassung

Für einige einfache Datenübertragungen ist für die Komponentenkommunikation nicht unbedingt die Verwendung von Vuex erforderlich , Stütze kann auch abgeschlossen werden. In diesem Artikel werden hauptsächlich einige grundlegende Wissenspunkte zur Übergabe von Komponentenparametern aufgeführt. Für die tatsächliche Praxis können Sie sich auf Notepad als Beispiel beziehen. Verwenden Sie prop, um Unterkomponenten anzuzeigen und auszublenden, und verwenden Sie vuex, um die Datenstatusverwaltung zwischen Komponenten zu implementieren.

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Daten zwischen vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!