Vue2单一事件管理组件通信


Posted in Javascript onMay 09, 2017

本文为大家分享了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>

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

Javascript 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
表格 隔行换色升级版
Nov 07 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
react-router实现按需加载
May 09 #Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
You might like
paypal即时到账php实现代码
2010/11/28 PHP
php创建session的方法实例详解
2015/01/27 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
python创建关联数组(字典)的方法
2015/05/04 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
集体婚礼证婚词
2014/01/13 职场文书
图书室管理制度
2014/01/19 职场文书
个人授权委托书
2014/04/03 职场文书
2014年教师工作总结
2014/11/10 职场文书
关于运动会的广播稿
2015/08/19 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android