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

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

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

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

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

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

• 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
        }
    },

•                                                                                                                           
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. 在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)
                },
        }

Verwandte Empfehlungen:

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

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