四、兄弟组件间通信（event）

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

var bus = new Vue();

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

熊大想要发消息给熊二，

接收方（熊二）：事件绑定
bus.$on('customEvent',function(msg){
//msg就是通过事件 传递来的数据
})
发送方（熊大）：触发事件
bus.$emit('customEvent',123);

练习：
在熊二中 加上一个button，
点击按钮时告诉熊大:'快跑！'

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

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.   <div id="container">
  10.         <p>{{msg}}</p>
  11.         <xiongda></xiongda>
  12.         <hr>
  13.         <xionger></xionger>
  14.     </div>
  15.     <script>
  16. /*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
  17. //new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
  18.     var bus = new Vue();
  19.     //熊大发送消息给熊二
  20.         //xiongda组件
  21.         Vue.component("xiongda",{
  22.             methods:{
  23.                 sendToXiongEr:function(){
  24.                 //给熊二发送消息
  25.                 //触发msgToXiongEr事件
  26.                     bus.$emit("msgToXiongEr","哈哈，光头强来了");
  27.                 }
  28.             },
  29.             template:`
  30.                 <div>
  31.                     <h1>我是熊大</h1>
  32.                     <button @click="sendToXiongEr">Click Me</button>
  33.                 </div>
  34.             `
  35.         })
  36. //熊二组件
  37.         Vue.component("xionger",{
  38.             template:`
  39.                 <div>
  40.                     <h1>我是熊二</h1>
  41.                 </div>
  42.             `,
  43.             mounted:function(){
  44. //            给该组件绑定一个自定义事件和对应的处理函数
  45.                 //调用bus中的on方法
  46.                 //事件的触发一般是接收数据然后处理
  47.                 var that = this;
  48.                     bus.$on("msgToXiongEr",function(msg){
  49.                         alert("自定义的事件触发，接收到的数据"+msg);
  50.                     })
  51.             }
  52.         })
  53.         new Vue({
  54.             el:"#container",
  55.             data:{
  56.                 msg:"Hello VueJs"
  57.             }
  58.         })
  59.     </script>
  60.  </body>
  61. </html>

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

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.   <div id="container">
  10.         <p>{{msg}}</p>
  11.         <xiongda></xiongda>
  12.         <hr>
  13.         <xionger></xionger>
  14.     </div>
  15.     <script>
  16. /*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
  17. //new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
  18.     var bus = new Vue();
  19.     //熊大发送消息给熊二
  20.         //xiongda组件
  21.         Vue.component("xiongda",{
  22.             data:function(){
  23.                 return {
  24.                     xiongDaInput:""
  25.                 }
  26.             },
  27.             methods:{
  28.                 sendToXiongEr:function(){
  29.                 //给熊二发送消息
  30.                 //触发msgToXiongEr事件
  31.                     bus.$emit("msgToXiongEr",this.xiongDaInput);
  32.                     this.xiongDaInput = "";
  33.                 }
  34.             },
  35.             template:`
  36.                 <div>
  37.                     <h1>我是熊大</h1>
  38.                     <input type="text" v-model="xiongDaInput"/>
  39.                     <button @click="sendToXiongEr">Click Me</button>
  40.                 </div>
  41.             `
  42.         })
  43. //熊二组件
  44.         Vue.component("xionger",{
  45.             data:function(){
  46.                 return{
  47.                     recvMsgIs:[]
  48.                 }
  49.             },
  50.             template:`
  51.                 <div>
  52.                     <h1>我是熊二</h1>
  53.                     <p v-for="tmp in recvMsgIs">{{tmp}}</p>
  54.                 </div>
  55.             `,
  56.             mounted:function(){
  57. //            给该组件绑定一个自定义事件和对应的处理函数
  58.                 //调用bus中的on方法
  59.                 //事件的触发一般是接收数据然后处理
  60.                 var that = this;
  61.                     bus.$on("msgToXiongEr",function(msg){
  62.                         //alert("自定义的事件触发，接收到的数据"+msg);
  63.                             that.recvMsgIs.push(msg);
  64.                     })
  65.             }
  66.         })
  67.         new Vue({
  68.             el:"#container",
  69.             data:{
  70.                 msg:"Hello VueJs"
  71.             }
  72.         })
  73.     </script>
  74.  </body>
  75. </html>

vue组件兄弟间通信的更多相关文章

  1. vue组件间通信六种方式（完整版）

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  2. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  3. VUE组件如何通信

    Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...

  4. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  5. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  6. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  7. vue组件间通信

    组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...

  8. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  9. vue组件间通信子与父

    二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...

随机推荐

  1. VSCode配置 Debugger for Chrome插件

    Debugger for Chrome这个插件是直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能进行打断点. 首先在左侧扩展栏找到这个插件下载好 ...

  2. MySQL存储过程、触发器、自定义函数、事务

    1.存储过程 MySQL中存储过程的参数中有IN.OUT.INOUT类型,但是函数的参数只能是IN类型的. “in” 参数:跟 C 语言的函数参数的值传递类似, MySQL 存储过程内部可能会修改此参 ...

  3. PAT Basic 1024 科学计数法 (20 分) Advanced 1073 Scientific Notation (20 分)

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  4. 合肥学院ACM集训队第一届暑假友谊赛 B FYZ的求婚之旅 D 计算机科学家 F 智慧码 题解

    比赛网址:https://ac.nowcoder.com/acm/contest/994#question B FYZ的求婚之旅 思路: 然后用快速幂即可. 细节见代码: #include <i ...

  5. 关于sword框架浏览器上方小图标的修改

    sword框架默认有一个document.ejs文件,可以导出html模板(找了很久没找到index.html,哈哈哈),里面有一行代码 这个href就是代表着浏览器上方图标的路径. 在public文 ...

  6. 51nod1820 长城之旅

    题目描述 BB 痛失一血(打了场Comet OJ回来就没了) 不过后来又刷了一道水题 题解 LCM+取模=结论题 结论1 \(gcd(k^{2^i}+1,k^{2^j}+1)=1 (i\neq j 且 ...

  7. oracle java for ubuntu apt-get

    oracle java PPA: ppa:webupd8team/javathe key word use for search more infomation: webupd8team

  8. Spring read-only="true" 只读事务的一些概念

    概念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必 ...

  9. Java——GUI

    [AWT]    <1>AWT(Abstract Widow Toolkit)包含了很多类和接口,用于Java Application的GUI(Graphics User Interfac ...

  10. 题解 P2674 【《瞿葩的数字游戏》T2-多边形数】

    题目说了很清楚,此题找规律,那么就找规律. 我们观察数列. 令k表示数列的第k个数. 三角形数:1 3 6 10 15 两项相减:1 2 3 4 5 再次相减:1 1 1 1 1 四边形数:1 4 9 ...