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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php关联数组快速排序的方法
2015/04/17 PHP
3种php生成唯一id的方法
2015/11/23 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python数组遍历的简单实现方法小结
2016/04/27 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Django中的Model操作表的实现
2018/07/24 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python之语音识别speech模块
2020/09/09 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
初中女生自我鉴定
2013/12/19 职场文书
村安全生产责任书
2014/08/25 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
学习心得体会
2019/06/20 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python