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来实现动画导航效果的代码
Dec 16 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
微信小程序模板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
YB217、YB235、YB400浅听
2021/03/02 无线电
php a simple smtp class
2007/11/26 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python局部赋值的规则
2013/03/07 Python
Python数据类型详解(二)列表
2016/05/08 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python 堆和优先队列的使用详解
2019/03/05 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
django 模型字段设置默认值代码
2020/07/15 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
介绍一下grep命令的使用
2015/06/12 面试题
电子装配专业毕业生求职信
2014/04/23 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
悬空寺导游词
2015/02/05 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android