Vuejs uses $ EMIT with $ ON to make data transmission communication between brothers components

  • 的头像-Tumi
  • 47 day agopublish

Recently, I have learned the issue before the VUE component chicken assembly, just seeing, with this to keep notes.

  VUE2-single event management component communication     // Prepare an empty instance object Var Event = new Vue (); // Component a var a = {template: `  I am A component data -> {{a}}    `, Methods: {Send () {Event. $ EMIT (" A-MSG ", THIS.A);}}, data () {Return {A:" I am A component data "}}}; // component B var b = {template:` `
I am the data of the component B -> {{A}}
`, Methods: {Send () {Event. $ EMIT ("B-msg", this.a);}}} {a: "I am Data"}}}; // component C Var c = { Template: `
I am C component The data received over A is: {{A}}

The data received over B is: {{b}}

`, mounted () {// Receive the data Event. $ ON ("A-MSG", Function (A) {this.a = a;} .bind (this)); // Receive the data of the B component. $ ON ("B- ", function (a) {this.b = a;} .bind (this));}, data () {return {a:", b: "}}}; window.onload = function () {New Vue ({EL: "#box", Components: {"DOM-a": a, "DOM-B": B, "DOM-C": C}});};
All the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment