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 相关文章推荐
js验证表单大全
Nov 25 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
js实现旋转的星空效果
Nov 01 Javascript
jQuery实现视频展示效果
May 30 jQuery
Openlayers实现地图全屏显示
Sep 28 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下获取客户端ip地址的函数
2010/03/15 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
js单例模式详解实例
2013/11/21 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
如何使用angularJs
2017/05/08 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python pdb调试方法分享
2014/01/21 Python
python新手经常遇到的17个错误分析
2014/07/30 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Python如何输出整数
2020/06/07 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
个人向公司借款协议书
2014/10/09 职场文书
如何写新闻稿
2015/07/18 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫