Vue js nicht untergeordnete übergeordnete Kommunikation mit Ereignisbus funktioniert nicht

In vue js Dokument gibt es eine Möglichkeit, zwischen nicht übergeordneten untergeordneten Komponenten zu kommunizieren. vue document. Aber als ich diese Methode ausprobiert habe, hat es nicht funktioniert. Unten ist mein Code. Gibt es Hilfe?Vue js nicht untergeordnete übergeordnete Kommunikation mit Ereignisbus funktioniert nicht

Die HTML-Seite:

<html> 
    <body> 
     <div id="app10"> 
      <component3 :id="id"></component3> 
      <component4 :id="id"></component4> 
     </div> 
    </body 

</html>

Das js Skript:

var bus = new Vue(); 
Vue.component('component3', { 
    template: ` 
    <div @click='change'> 
     {{id}} 
    </div> 
    `, 
    props: ['id'], 
    methods: { 
    change() { 
     console.log('??? component3 emit'); 
     bus.$emit('idSelected', 3); 
    } 
    }, 
    mounted() { 
    } 
}); 

Vue.component('component4', { 
    template: ` 
    <div> 
     {{id}} 
    </div> 
    `, 
    props: ['id'], 
}); 

var app10 = new Vue({ 
    el: '#app10', 
    data: function() { 
    return { 
     id: '?' 
    } 
    }, 
    mounted() { 
    bus.$on('idSelected', function(value) { 
     console.log('??? app10 click event value: ', value); 
     this.id = value; 
     console.log('??? this.id', this.id); 
    }); 
    }, 
    methods: { 
    } 
});

Was ich tun möchte, ist: 'Fragezeichen', wenn ich die component3 klicken, sollte sein Textinhalt aus ändern zu "Nummer 3". Aber es funktioniert nicht. Selbst wenn die "ID" von den Elterndaten auf "3" geändert wurde, änderte sich die "ID" der Kinderrequisiten überhaupt nicht. Warum?

Die Konsolenausgabe:

??? component3 emit 
??? app10 click event value: 3 
??? this.id 3

Quelle

2017-06-19 soarinblue

Dies ist eine Scoping-Ausgabe. Passen Sie Ihre mounted Haken wie folgt:

mounted() { 
    const self = this; // save pointer to current 'this' 
    bus.$on('idSelected', function(value) { 
     console.log('??? app10 click event value: ', value); 
     self.id = value; // use 'self' here 
     console.log('??? this.id', this.id); 
    }); 
    }

Andernfalls verlieren Sie einen Verweis auf aktuelle ‚this‘, weil es in der Ereignis-Listener ‚Bus‘ gleich. Versuchen Sie console.log(this === bus) in Ihrem Listener (== wahr).

Quelle

2017-06-19 07:55:42 wostex

Silly mich, machen Sie diesen Fehler erneut. Vielen Dank! – soarinblue

Gern geschehen. – wostex

Der Wert this wird in Ihrem Code in Ihrer anonymen Funktion zu ändern. Verwenden Sie stattdessen die Pfeilfunktion, um den Kontext Ihrer vue-Instanz beizubehalten.

var bus = new Vue(); 
 
Vue.component('component3', { 
 
    template: ` 
 
    <div @click='change'> 
 
     {{id}} 
 
    </div> 
 
    `, 
 
    props: ['id'], 
 
    methods: { 
 
    change() { 
 
     console.log('??? component3 emit'); 
 
     bus.$emit('idSelected', 3); 
 
    } 
 
    }, 
 
    mounted() { 
 
    } 
 
}); 
 

 
Vue.component('component4', { 
 
    template: ` 
 
    <div> 
 
     {{id}} 
 
    </div> 
 
    `, 
 
    props: ['id'], 
 
}); 
 

 
var app10 = new Vue({ 
 
    el: '#app10', 
 
    data: function() { 
 
    return { 
 
     id: '?' 
 
    } 
 
    }, 
 
    mounted() { 
 
    bus.$on('idSelected', (value) => { 
 
     console.log('??? app10 click event value: ', value); 
 
     this.id = value; 
 
     console.log('??? this.id', this.id); 
 
    }); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<html> 
 
    <body> 
 
     <div id="app10"> 
 
      <component3 :id="id"></component3> 
 
      <component4 :id="id"></component4> 
 
     </div> 
 
    </body> 
 

 
</html>

Quelle

2017-06-19 07:55:26 Cobaltway

Vue js nicht untergeordnete übergeordnete Kommunikation mit Ereignisbus funktioniert nicht

Antwort

Verwandte Themen