Mehrere Kommunikationsmethoden von Vue-Komponenten

Mehrere Kommunikationsmethoden (Datenübertragung) von Vue-Komponenten

Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten (Bus-Ereignisbus)

einführen

Schreiben Sie eine JS-Datei als Vermittler. Die Partei, die die Nachricht empfängt, empfängt sie über die Listening-Methode$on\left(\right)Methode\; zum\; Empfangen\; der\; Nachricht\; Der\; Absender\; sendet\; Nachrichten\; über$emit() an den Bus, um wiederum den Zweck der Kommunikation zu erreichen. Im Publish-Subscribe-Modus kann es mehrere Empfänger der Nachricht geben.

Beispiel

1. Erstellen Sie einen Event-Bus, auf den jeder zugreifen kann (leere Vue-Instanz)

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus
   

2. Eine Komponente (Empfänger) lauscht auf das $on-Ereignis von Bus

   import Bus from '../utils/EventBus'
   
   created () {
     Bus.$on('sendMsg', (msg) => {
       this.msg = msg
     })
   }
   

3. Komponente B (Sender) löst das $emit-Ereignis von Bus aus

   import Bus from '../utils/EventBus'
   
   Bus.$emit('sendMsg', '这是一个消息')
   

Nicht-Eltern-Kind-Kommunikation bereitstellen und injizieren

1.Funktion

Teilen Sie Daten über Ebenen hinweg

2. Szene

3. Grammatik

1. Die übergeordnete Komponente stellt Daten bereit

export default {
    
    
  provide () {
    
    
    return {
    
    
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2. Einfügung der untergeordneten/enkelkindlichen Komponente, um Daten zu erhalten

export default {
    
    
  inject: ['color','userInfo'],
  created () {
    
    
    console.log(this.color, this.userInfo)
  }
}

4. Achtung

• Die von Provide bereitgestellten einfachen Typdaten reagieren nicht, und die komplexen Typdaten reagieren. (Es wird empfohlen, komplexe Typdaten bereitzustellen.)
• Die von der untergeordneten/enkelkindlichen Komponente über inject erhaltenen Daten können nicht innerhalb ihrer eigenen Komponente geändert werden.

Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Name des Props-Attributs korrigiert (V-Modell)

einführen

Unter Verwendung des Prinzips des V-Modells zur Kommunikation zwischen übergeordneten und untergeordneten Komponenten kann das V-Modell aufgeteilt werden: ①: Wert ② @input-Ereignis erfordert, dass der Attributname im Props-Attribut in der untergeordneten Komponente Wert sein muss: Ereignis in $emit () Der Name muss eingegeben werden

Beispiel

Unterbaugruppe

<select :value="value" @change="handleChange">...</select>
props: {
  value: String
},
methods: {
  handleChange (e) {
    this.$emit('input', e.target.value)
  }
}

übergeordnete Komponente

<BaseSelect v-model="selectId"></BaseSelect>

Nicht fixierter Attributname (.sync)

einführen

Hauptsächlich, um einige Ergänzungen zur Situation im V-Modell vorzunehmen. Bei der Übertragung von Formulardaten ist es sinnvoller, Werte zu verwenden, einige sind jedoch ungeeignet, z. B. Dropdown-Listen usw. Der Vorteil besteht darin, dass der Name des Wertattributs angepasst werden kann ohne es zu beheben. Fügen Sie .sync nach dem Attribut in der übergeordneten Komponente hinzu und verwenden Sie @update: Attributname im Ereignisnamen in $emit() in der untergeordneten Komponente.

Beispiel

übergeordnete Komponente

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog 
  :visible="isShow" 
  @update:visible="isShow = $event" 
/>

Unterbaugruppe

props: {
  visible: Boolean
},

this.$emit('update:visible', false)