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;

// 子组件中
<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>

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 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()

// 组件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>

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!