Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-02-07 14:23:24
Original
2459 Leute haben es durchsucht

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'
Nach dem Login kopieren
// 2.在ccmponents里注册子组件    components : {
        counter,
        son
    },
Nach dem Login kopieren
// 3.在template里使用子组件   <son></son>
Nach dem Login kopieren
 // 4.如果需要传递数据,也是在templete里写
 
   <counter :num="number"></counter>
Nach dem Login kopieren
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'
           ],
Nach dem Login kopieren
// 2.如果需要修改得到的数据,可以这样写
   props: [            'num'
        ],  data () {        return {
            number : this.num
        }
    },
Nach dem Login kopieren

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>
Nach dem Login kopieren
// 2. 用changeNumber监听事件是否触发
        methods: {
            changeNumber(e){                console.log('子组件emit了',e);                this.number = e
            },
        }
Nach dem Login kopieren
  • 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)
                },
        }
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!