Einführung in die Verwendung von Wertübertragung und Ereignisbus (Eventbus) in Vue-Nicht-Eltern-Kind-Komponenten

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Wertübertragung und Ereignisbus (Eventbus) in Vue-Nicht-Eltern-Kind-Komponenten. Freunde in Not können sich darauf beziehen. , hoffe es hilft dir.

Lassen Sie uns zunächst darüber sprechen, was ein Ereignisbus ist, der eigentlich das Abonnement-Publisher-Modell ist.

Es gibt beispielsweise zwei Methoden für dieses Objekt. Einer ist eingeschaltet (Zuhören, also Abonnement), einer ist emit (Trigger, also veröffentlichen), wir hören ein Ereignis über die on-Methode ab, verwenden dann emit, um das Ereignis auszulösen, und rufen die Rückruffunktion in on at auf gleichzeitig, wodurch ein Ereignisauslöser vervollständigt wird;

Dies ist ein Designmuster und hat nichts mit der Sprache zu tun

Wenn Sie nicht wissen, was das Abonnement-Publisher-Muster ist, lesen Sie es bitte Dieser Artikel: JavaScript-Entwurfsmuster – Beobachtermuster (Publisher-Subscriber-Modell)

In der tatsächlichen Entwicklung ist das problematischste Problem häufig das Problem der Wertübertragung zwischen verschiedenen Komponenten ganz einfach;

Mängel des Vue-eigenen Event-Busses

Wir alle wissen, dass Vue nach der Instanziierung als Event-Bus-Objekt fungieren kann es gibt zwei Methoden, $emit und $on;

Das Vue-Dokument macht deutlich, dass $emit Ereignisse für die aktuelle Instanz auslöst und zusätzliche Parameter an den Listener-Rückruf übergeben werden;

Da wir in der tatsächlichen Arbeit in Form von Komponenten entwickeln, ist jede Komponente eine Instanz.

Daher gibt es große Einschränkungen bei der Nutzung der Busfunktionen von vue von Unterkomponenten. Trigger an die übergeordnete Komponente, aber keine Werte zwischen nicht übergeordneten und untergeordneten Komponenten übergeben.

Zu diesem Zeitpunkt benötigen wir also ein globales Ereignisbusobjekt, das uns das Mounten ermöglicht Abhörereignisse und auslösende Ereignisse;

Zum Beispiel übergibt eine untergeordnete Komponente einen Wert an eine untergeordnete Komponente. Darüber werden wir hier nicht sprechen 🎜>

// 子组件中
<template>
  <div>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 如果传多个值就用逗号隔开 a, b, c
        this.$emit('fromChild', this.child)
      }
    }
  }
</script>

rrree

Mehrere Möglichkeiten, globale Ereignisbusobjekte zu implementieren

Methode eins ist auch die Methode, die ich selbst verwende (empfohlen, einfach)

Die allgemeine Idee ist : In main.js, der Eintragsdatei, befinden wir uns im Prototyp von vue. Fügen Sie ein Busobjekt hinzu.

Die spezifische Implementierungsmethode lautet wie folgt:

Die folgende Komponente A und Komponente B können zwei beliebige Komponenten im Projekt sein

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事件
    <child @fromChild="onFromChild"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
        this.name = data
      }
    }
  }
</script>

Die zweite Methode ist etwas mühsam, aber die allgemeine Implementierungsidee von

ist auch leicht zu verstehen : Erstellen Sie eine neue bus.js-Datei und instanziieren Sie diese in der bus.js-Datei der Komponenten A und B. Hängen Sie die Ereignisüberwachung und die Ereignisauslösung an die bus.js-Instanz an, um eine globale Überwachung und Auslösung zu ermöglichen kann erreicht werden

Schreiben Sie ein Beispiel

bus.js-Datei

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

Komponente A

// bus.js文件
import Vue from 'vue'
export default new Vue()

Komponente B

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

Auf diese Weise haben wir eine einfache Werteübertragung zwischen nicht-übergeordneten und untergeordneten Komponenten durchgeführt.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Wertübertragung und Ereignisbus (Eventbus) in Vue-Nicht-Eltern-Kind-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!