Teilen Sie Beispiele für 4 Vue-Komponenten-Kommunikationsmethoden

In diesem Artikel werden hauptsächlich vier Kommunikationsmethoden für Vue-Komponenten vorgestellt: Kommunikation zwischen übergeordneten und untergeordneten Komponenten, EventBus-Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten, Komponentenkommunikation mithilfe des lokalen Caches und Vuex-Kommunikation. Ich hoffe, es hilft allen.

Die erste Kommunikationsmethode: Eltern-Kind-Komponentenkommunikation

Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

• Die übergeordnete Komponente muss dies tun insgesamt 4 Dinge Dinge

• 1.import son from './son.js' Registrieren Sie alle Unterkomponentennamen in „son“}

• 3. Wenden Sie die Unterkomponente in der Vorlage der übergeordneten Komponente an,

• 4. Wenn Sie Daten übergeben müssen Schreiben Sie zur Unterkomponente

• in die Vorlage >                                                                                        Daten können direkt verwendet werden

2. Die von der Unterkomponente empfangenen Daten können nicht geändert werden. Wenn Sie es wirklich ändern müssen, können Sie berechnete Eigenschaften verwenden oder die Daten einer Variablen in den untergeordneten Komponentendaten

 // 1.引入子组件 
     import counter from './counter'     import son from './son'

// 2.在ccmponents里注册子组件    components : {
        counter,
        son
    },

// 3.在template里使用子组件   <son></son>

 // 4.如果需要传递数据,也是在templete里写
 
   <counter :num="number"></counter>

Daten

• Die übergeordnete Komponente muss insgesamt 2 Dinge tun

• Ereignisse in der Vorlage definieren

• Eine Funktion in Methoden schreiben und Hören Sie sich die Ereignisauslösung der Unterkomponente an

                                       🎜>

   // 1.用Props接受数据      props: [               'num'
           ],

// 2.如果需要修改得到的数据,可以这样写
   props: [            'num'
        ],  data () {        return {
            number : this.num
        }
    },

Nachdem sich die Daten geändert haben, verwenden Sie $emit zum Auslösen.

•                                                                                                                           
Die EventBus-Kommunikationsmethode zielt auf die Kommunikation zwischen nicht-übergeordneten und untergeordneten Komponenten ab. Ihr Prinzip besteht immer noch in der Auslösung und Überwachung von Ereignissen.

• Da es sich jedoch um keine Eltern-Kind-Komponenten handelt, benötigen sie eine Zwischenkomponente, um sie zu verbinden.

Ich verwende es, indem ich eine Komponente definiere, auf die alle Komponenten in der Stammkomponente zugreifen können, nämlich die #app-Komponente. Die spezifische Verwendung ist wie folgt

• Verwendung von EventBus zum Übergeben von Daten. Wir müssen insgesamt drei Dinge tun

1. Fügen Sie der App-Komponente das Bus-Attribut hinzu (damit alle Komponenten über this.$root.Bus darauf zugreifen können, und es ist nicht nötig, irgendwelche Dateien einzuführen)

// 1. 在templete里应用子组件时,定义事件changeNumber
      <counter :num="number"                 @changeNumber="changeNumber"
      >
      </counter>

// 2. 用changeNumber监听事件是否触发
        methods: {
            changeNumber(e){                console.log('子组件emit了',e);                this.number = e
            },
        }

• 2. In Komponente 1 löst this.$root.Bus.$emit das Ereignis

3. In Komponente 2 lauscht $root.Bus.$on auf Ereignisse

•                                                                                

Daten über window.localStorage.getItem(key) abrufen
Daten über window.localStorage.setItem(key, value) speichern

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
        methods: {
            increment(){                    this.number++                    this.$emit('changeNumber', this.number)
                },
        }

Bitte verwenden Sie JSON.parse() / JSON.stringify () Datenformat konvertieren.

Die vierte Kommunikationsmethode: Verwendung von Vuex

Vuex ist komplizierter, Sie können einen separaten Artikel schreiben

Verwandte Empfehlungen:

Erfahrungsaustausch bei der Entwicklung von Vue-Komponenten

• Detaillierte Erläuterung der Eltern-Kind-Kommunikation von Vue-Komponenten

• Detaillierte Erläuterung des dynamischen Ladens von Vue-Komponenteninstanzen in das Berechtigungsverwaltungsmodul

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für 4 Vue-Komponenten-Kommunikationsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!