温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue2中怎么实现管理组件通信

发布时间:2021-07-21 14:12:10 阅读:163 作者:Leah 栏目:web开发
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

具体内容如下

<!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> 
    <h4>我是C组件</h4> 
    <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>

看完上述内容,你们对Vue2中怎么实现管理组件通信有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×