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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JS Object构造函数之Object.freeze
Apr 28 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安全配置
2006/12/06 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
解决laravel session失效的问题
2019/10/14 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python发送Email方法实例
2014/08/21 Python
Python魔术方法详解
2015/02/14 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python函数中的可变长参数详解
2019/09/12 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
开业庆典主持词
2014/03/21 职场文书
反邪教警示教育方案
2014/05/13 职场文书
大学应届毕业生求职信
2014/05/24 职场文书