Vue2中怎么实现管理组件通信-创新互联

今天就跟大家聊聊有关Vue2中怎么实现管理组件通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

具体内容如下

 
 
 
  
  
  
  
 
 //准备一个空的实例对象 
 var Event = new Vue(); 
 
 //组件A 
 var A = { 
  template: ` 
   
 
    我是A组件的数据->{{a}} 
     
   
 
  `, 
  methods: { 
   send () { 
    Event.$emit("a-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "我是a组件中数据" 
   } 
  } 
 }; 
 //组件B 
 var B = { 
  template: ` 
   
 
    我是B组件的数据->{{a}} 
     
   
 
  `, 
  methods: { 
   send () { 
    Event.$emit("b-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "我是b组件中数据" 
   } 
  } 
 }; 
 //组件C 
 var C = { 
  template: ` 
   
 
    
我是C组件
 
    接收过来A的数据为: {{a}} 
    
 
    接收过来B的数据为: {{b}} 
   
 
  `, 
  mounted () { 
   //接收A组件的数据 
   Event.$on("a-msg", function (a) { 
    this.a = a; 
   }.bind(this)); 
 
   //接收B组件的数据 
   Event.$on("b-msg", 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 
   } 
  }); 
 };