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 eval和JSON之间的联系
Dec 31 Javascript
js取得url地址参数实例
Feb 22 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JavaScript window.location对象
Nov 14 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
详解Vue的sync修饰符
May 15 Vue.js
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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php删除数组元素示例分享
2014/02/17 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
解决layui的input独占一行的问题
2019/09/10 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
大学老师推荐信
2014/02/25 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014年教研组工作总结
2014/11/26 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2019大学生实习报告
2019/06/21 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server