Detaillierte Erläuterung der Komponentenkommunikationstechnologie in Vue

Vue ist heute eines der beliebtesten Front-End-Frameworks. Es bietet uns eine sehr leistungsstarke komponentenbasierte Entwicklungsmethode, die unsere Entwicklungseffizienz erheblich verbessern kann. Bei der komponentenbasierten Entwicklung von Vue ist die Kommunikationsverarbeitung zwischen Komponenten sehr wichtig. Dieser Artikel bietet eine detaillierte Einführung in die Komponentenkommunikationstechnologie in Vue.

1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente.

In Vue übergibt die übergeordnete Komponente Daten mithilfe des Props-Attributs an die untergeordnete Komponente. Empfangen Sie die von der übergeordneten Komponente übergebenen Daten über das props-Attribut in der untergeordneten Komponente.

Code der übergeordneten Komponente:

<template>
  <div>
    <child-component :msg="msg"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

Code der untergeordneten Komponente:

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        required: true
      }
    }
  }
</script>

Hier werden Daten mithilfe des Tags der untergeordneten Komponente in der übergeordneten Komponente übergeben, und die untergeordnete Komponente verwendet das Props-Attribut, um die von der übergeordneten Komponente übergebenen Daten zur Vervollständigung zu empfangen die Datenübertragung.

2. Die Unterkomponente übergibt Daten an die übergeordnete Komponente.

Die Unterkomponente übergibt Daten mithilfe benutzerdefinierter Ereignisse und der Methode $emit an die übergeordnete Komponente.

Unterkomponentencode:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello Parent!')
      }
    }
  }
</script>

Hier definieren Sie eine Methode und verwenden die $emit-Methode, um benutzerdefinierte Ereignisse und die zu übergebenden Daten zu übergeben.

Code der übergeordneten Komponente:

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      receiveMessage(msg) {
        this.message = msg
      }
    }
  }
</script>

Verwenden Sie hier das Tag der untergeordneten Komponente in der übergeordneten Komponente, um die von der untergeordneten Komponente gesendeten benutzerdefinierten Ereignisse abzuhören, und verwenden Sie die Methode „receiveMessage“, um die von der untergeordneten Komponente übergebene Nachricht zu empfangen.

3. Kommunikation zwischen Geschwisterkomponenten: Da sie keine Eltern-Kind-Beziehung haben, können sie nicht direkt Requisiten und $emit-Methoden verwenden, um wie bei der Kommunikation zwischen Eltern-Kind-Komponenten zu kommunizieren Vue nutzen. Eine weitere Kommunikationsmethode: Eventbus.

Ein Ereignisbus ist eine benutzerdefinierte Vue-Instanz, die für die Kommunikation zwischen Geschwisterkomponenten verwendet wird. In einer Komponente können wir die Methode $emit verwenden, um benutzerdefinierte Ereignisse an den Ereignisbus zu senden, und eine andere Komponente kann Ereignisse über die Methode $on abhören und empfangen.

Event-Bus-Code:

import Vue from 'vue'
export default new Vue();

Hier wird ein Event-Bus über eine separate Datei erstellt.

Komponente A-Code:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('send-message', 'Hello B!')
      }
    }
  }
</script>

Um Nachrichten in Komponente A zu senden, verwenden Sie hier die EventBus.$emit-Methode, um benutzerdefinierte Ereignisse an den Ereignisbus zu senden.

Komponenten-B-Code:

<template>
  <div>{{ message }}</div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('send-message', msg => {
        this.message = msg
      })
    }
  }
</script>

Hier hören Sie auf den Ereignisbus in Komponente B und verwenden Sie die EventBus.$on-Methode, um von Komponente A gesendete Nachrichten zu empfangen.

4. Ebenenübergreifende Komponentenkommunikation

Bei der Ebenenübergreifenden Komponentenkommunikation können wir die in Vue bereitgestellte Bereitstellungs-/Injektionsmethode verwenden. Die Provide/Inject-Methoden können Daten an untergeordnete Komponenten auf jeder Ebene übergeben. Die

provide-Methode stellt der untergeordneten Komponente ein Datenobjekt bereit, und die inject-Methode injiziert dieses Datenobjekt in die untergeordnete Komponente.

Code der übergeordneten Komponente:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

Hier wird die Provide-Methode in der übergeordneten Komponente verwendet, um intern eine Datenobjektnachricht bereitzustellen.

Code der untergeordneten Komponente:

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    inject: ['message'],
    computed: {
      value() {
        return this.message
      }
    }
  }
</script>

Verwenden Sie hier die Injektionsmethode in der untergeordneten Komponente, um das von der übergeordneten Komponente bereitgestellte Datenobjekt einzufügen, und verwenden Sie dann dieses Datenobjekt.

Zusammenfassung

Das Obige ist eine detaillierte Einführung in die Komponentenkommunikation in Vue. Wenn wir während des Entwicklungsprozesses mit Daten zwischen Komponenten interagieren müssen, können die oben genannten Technologien dieses Problem sehr gut lösen. Wir müssen je nach Situation den am besten geeigneten Weg zur Implementierung der Kommunikation zwischen Komponenten auswählen, um den optimalen Entwicklungseffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Komponentenkommunikationstechnologie in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!