Übergabe von Werten zwischen dem exportierten und dem nicht exportierten Teil des Skripts

Question

Wie können Werte zwischen dem exportierten Teil eines Skripts und dem nicht exportierten Teil übergeben werden?

Der Aufbau sieht wie folgt aus:

<script> 
// PART 1: 
import { EventBus } from './event-bus.js'; 

EventBus.$on('value-received', value => { 
    this.receivedValue = value; 
}); 

// PART 2: 
export default { 
    data() { 
     return { 
      receivedValue: '' 
     } 
    }, 
    watch: {...}, 
    methods: {...} 
} 
</script> 

Wie kann ich von Vue Methoden der value zugewiesen receivedValue variabel und nutzbar gemacht werden?

Answer 1

Weil Ihr EventBus.$on Aufruf einen Pfeil Funktion verwendet, die this es verweist die this in ihrem Umfang zum Zeitpunkt des EventBus Anrufs.

Wenn Sie mit allen Instanzen Ihrer Veranstaltung die gleichen receivedValue mit in Ordnung sind, können Sie die Werte erhielten im Rahmen Ihrer Datei auf ein Objekt umleiten könnten:

var shared = { receivedValue: '' }; 
EventBus.$on('value-received', value => { 
    shared.receivedValue = value; 
}); 

export default { 
    data() { return shared; } 
    watch: ..., 
    methods: .... 
} 

Vue.js wird einen Handler registrieren reagieren auf Änderungen an dem Objekt, das Sie zurückgegeben haben, dh. shared.

Wenn Sie aus irgendeinem Grund einen separaten Ereignisdatenstrom pro Instanz Ihrer Komponente wünschen, müssen Sie innerhalb der data()-Funktion ein neues Objekt erstellen, und der Ereignisbus aktualisiert das neue Objekt direkt.