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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
浅谈JavaScript字符集
May 22 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
js实现简单选项卡制作
Aug 05 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新手用的Insert和Update语句构造类
2012/03/31 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
javascript 闭包
2011/09/15 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python中static相关知识小结
2018/01/02 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python 内存管理机制全面分析
2021/01/16 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
十一酒店活动方案
2014/02/20 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
党员个人自我评价
2015/03/03 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers