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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
js实现AI五子棋人机大战
May 28 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
react中使用swiper的具体方法
2018/05/15 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python3 实现调用串口功能
2019/12/26 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
如何写好建议书
2014/03/13 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
设备技术员岗位职责
2015/04/11 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
交通处罚决定书
2015/06/24 职场文书
小学运动会入场口号
2015/12/24 职场文书
使用CSS实现音波加载效果
2023/05/07 HTML / CSS