vue实现的组件兄弟间通信功能示例


Posted in Javascript onDecember 04, 2018

本文实例讲述了vue实现的组件兄弟间通信功能。分享给大家供大家参考,具体如下:

兄弟组件间通信(event)

借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发

var bus = new Vue();

bus.$emit()
bus.$on()

熊大想要发消息给熊二,

接收方(熊二):事件绑定

bus.$on('customEvent',function(msg){
//msg就是通过事件 传递来的数据
})

发送方(熊大):触发事件

bus.$emit('customEvent',123);

练习:

在熊二中 加上一个button,
点击按钮时告诉熊大:'快跑!'

接收方:事件绑定
发送方:触发事件

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <xiongda></xiongda>
    <hr>
    <xionger></xionger>
  </div>
  <script>
/*借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象,兄弟间的通信,将借助他事件绑定和触发来实现
  var bus = new Vue();
  //熊大发送消息给熊二
    //xiongda组件
    Vue.component("xiongda",{
      methods:{
        sendToXiongEr:function(){
        //给熊二发送消息
        //触发msgToXiongEr事件
          bus.$emit("msgToXiongEr","哈哈,光头强来了");
        }
      },
      template:`
        <div>
          <h1>我是熊大</h1>
          <button @click="sendToXiongEr">Click Me</button>
        </div>
      `
    })
//熊二组件
    Vue.component("xionger",{
      template:`
        <div>
          <h1>我是熊二</h1>
        </div>
      `,
      mounted:function(){
//      给该组件绑定一个自定义事件和对应的处理函数
        //调用bus中的on方法
        //事件的触发一般是接收数据然后处理
        var that = this;
          bus.$on("msgToXiongEr",function(msg){
            alert("自定义的事件触发,接收到的数据"+msg);
          })
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

vue实现的组件兄弟间通信功能示例

改版:熊大在input输入数据传递给熊二

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <xiongda></xiongda>
    <hr>
    <xionger></xionger>
  </div>
  <script>
/*借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象,兄弟间的通信,将借助他事件绑定和触发来实现
  var bus = new Vue();
  //熊大发送消息给熊二
    //xiongda组件
    Vue.component("xiongda",{
      data:function(){
        return {
          xiongDaInput:""
        }
      },
      methods:{
        sendToXiongEr:function(){
        //给熊二发送消息
        //触发msgToXiongEr事件
          bus.$emit("msgToXiongEr",this.xiongDaInput);
          this.xiongDaInput = "";
        }
      },
      template:`
        <div>
          <h1>我是熊大</h1>
          <input type="text" v-model="xiongDaInput"/>
          <button @click="sendToXiongEr">Click Me</button>
        </div>
      `
    })
//熊二组件
    Vue.component("xionger",{
      data:function(){
        return{
          recvMsgIs:[]
        }
      },
      template:`
        <div>
          <h1>我是熊二</h1>
          <p v-for="tmp in recvMsgIs">{{tmp}}</p>
        </div>
      `,
      mounted:function(){
//      给该组件绑定一个自定义事件和对应的处理函数
        //调用bus中的on方法
        //事件的触发一般是接收数据然后处理
        var that = this;
          bus.$on("msgToXiongEr",function(msg){
            //alert("自定义的事件触发,接收到的数据"+msg);
              that.recvMsgIs.push(msg);
          })
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码的运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
原生js实现放大镜特效
Mar 08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
微信小程序模板template简单用法示例
Dec 04 #Javascript
vue项目刷新当前页面的三种方法
Dec 04 #Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 #Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 #Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 #Javascript
React Native中Mobx的使用方法详解
Dec 04 #Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
You might like
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP children()函数讲解
2019/02/03 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python实现学员管理系统
2019/02/26 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年学校工作总结
2014/11/20 职场文书
销售人员管理制度
2015/08/06 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android