Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信


Posted in Javascript onFebruary 23, 2017

最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记。

<!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 Keycode对照表
Oct 24 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
Node.js Buffer用法解读
May 18 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 #Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 #Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php微信开发之关注事件
2018/06/14 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
详解Vite的新体验
2021/02/22 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python处理二进制数据的方法
2015/06/03 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
学年自我鉴定范文
2013/10/01 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
十八大闭幕感言
2014/01/22 职场文书
高二地理教学反思
2014/01/24 职场文书
优秀民警事迹材料
2014/01/29 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js