Wie kommuniziere ich zwischen Nicht-Eltern-Kind-Komponenten in vue2.0?

Die folgende Spalte „Vue.js-Tutorial“ stellt Ihnen die Kommunikationsmethode zwischen vue2.0-Nicht-Eltern-Kind-Komponenten vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

In Vue verwendet die übergeordnete Komponente Requisiten, um mit ihrer Komponente zu kommunizieren, und die untergeordnete Komponente verwendet das Ereignis $emit+, um mit der übergeordneten Komponente zu kommunizieren. Für die Kommunikation zwischen Vater und Sohn sind nur wenige Wörter erforderlich Die offiziellen Dokumente.

Wo soll diese leere Vue-Instanz platziert werden? Nachdem ich einige andere Informationen überprüft habe, stellte ich fest, dass dies tatsächlich der Fall ist zwischen Vater und Sohn wird verwendet:

Zunächst muss diese leere Instanz unter der Stammkomponente platziert werden, damit alle Unterkomponenten aufgerufen werden können, also unter main.js platziert werden, wie in der Abbildung gezeigt:

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:{
    Hub:new Vue()
  },
  template: &#39;<App/>&#39;,
  components: { App }
});

Meine beiden Komponenten heißen child1.vue, child2.vue. Ich möchte jetzt auf die Schaltfläche in child1.vue klicken, um den Wert in child2.vue zu ändern Dies erreichen:

child1.vue:

<template lang="pug">
  p this is child
    span(@click="correspond") 点击进行非组件之间的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改变")
      }

    }
  }
</script>

child2.vue:

<template lang="pug">
  p this is child2
    span {{message}}
</template>
<script>
  export default{
    data(){
      return {
        message: "初始值"
      }
    },
    created(){
      this.$root.Hub.$on("change", () => {
        this.message = "改变"
      })
    }
  }
</script>

Jetzt können wir den gewünschten Effekt erzielen. 🔜 Besuchen Sie:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen Nicht-Eltern-Kind-Komponenten in vue2.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!