欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue2单一事件管理组件通信

程序员文章站 2022-07-05 08:02:48
本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下

本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8" /> 
 <title>vue2-单一事件管理组件通信</title> 
 <script src="vue.js"></script> 
 <script type="text/javascript"> 
 
 //准备一个空的实例对象 
 var event = new vue(); 
 
 //组件a 
 var a = { 
  template: ` 
   <div> 
    <span>我是a组件的数据->{{a}}</span> 
    <input type="button" value="把a数据传给c" @click = "send"> 
   </div> 
  `, 
  methods: { 
   send () { 
    event.$emit("a-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "我是a组件中数据" 
   } 
  } 
 }; 
 //组件b 
 var b = { 
  template: ` 
   <div> 
    <span>我是b组件的数据->{{a}}</span> 
    <input type="button" value="把b数据传给c" @click = "send"> 
   </div> 
  `, 
  methods: { 
   send () { 
    event.$emit("b-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "我是b组件中数据" 
   } 
  } 
 }; 
 //组件c 
 var c = { 
  template: ` 
   <div> 
    <h3>我是c组件</h3> 
    <span>接收过来a的数据为: {{a}}</span> 
    <br> 
    <span>接收过来b的数据为: {{b}}</span> 
   </div> 
  `, 
  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 
   } 
  }); 
 }; 
 
 
 </script> 
</head> 
<body> 
 <div id="box"> 
  <dom-a></dom-a>  
  <dom-b></dom-b>  
  <dom-c></dom-c>  
 </div> 
 
</body> 
</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。