四、兄弟组件间通信（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="js/vue.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>

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

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title></title>

    <script src="js/vue.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>

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. LINUX 必知必会检测表--通读无关语言

    一.linux和os: 1.命令:netstat tcpdump ipcs ipcrm 这四个命令的熟练掌握程度基本上能体现实际开发和调试程序的经验 2.cpu 内存 硬盘 等等与系统性能调试相关的命 ...

  2. python 框架

    支持异步的 python web 框架 tornado 轻量级 flask 框架 flask中文文档 import base64 import random import io import time ...

  3. Nginx 详细介绍

    Nginx 和 Apache 一样是 http 服务器软件.它们的区别是 Apache 的处理速度慢,占用内存资源, nginx 恰恰相反.在功能上 Apache 的所有模块都支持动和静态编译,而 n ...

  4. 03javascript01

    1.javascript语法体系 1)EMCA基础语法(统一) 2)BOM编程(不统一) 3)DOM编程(不统一) 1.1 javascript使用 <!DOCTYPE html> < ...

  5. 七、ARM 指令集

    7.1 数据处理指令 7.1.1 数据传送类 MOV 类指令:核内寄存器间的数据传送 加载和存储指令(L/S):核内寄存器与挂在存储器总线上器件的数据传送 注意: 核内寄存器就是 R0-R15 外设寄 ...

  6. oracle中用case when查询列表

    查询sql语句如下 SELECT * FROM ( SELECT * ,ROW_NUMBER() OVER ( PARTITION BY scene_code ORDER BY (CASE statu ...

  7. vertica merge 优化

    -- 查看RDS的订单数(MySQL) select count(*) from  (   SELECT   tid,    IF(LOCATE('pay_time', jdp_response)=0 ...

  8. [CF286C] Main Sequence

    问题描述 定义幸运数列: 空数列是幸运数列 如果 S 是幸运数列,那么 {r, S, -r} 也是幸运数列 (r > 0) 如果 S 和 T 都是幸运数列,那么 {S, T} 也是幸运数列 给定 ...

  9. List常用操作 - List.FindAll / List.Sort

    List常用操作 (1) 筛选List中符合条件的项目 var list = FormControlList.FindAll(delegate (FormControlModel obj) { ret ...

  10. oracle 11g 卸载 安装10g 成功（卸载oracle+清除注册表信息+清除oracle app文件）

    停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 2 在开始菜单中,找到Universal Installer,运行Oracle Universal Ins ...