四、兄弟组件间通信（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. Python 实现类似sed命令的字符串替换小程序

    环境 PyCharm, Windows 背景 sed命令 sed 's/原字符串/新字符串' 单引号中间是s表示替换,原字符串就是要被替换掉的字符串,新字符串就是想要的字符串. 效果 在命令行输入py ...

  2. 使用pycharm编写自动化脚本

    1.:导入本地Python环境 2:安装Selenium 3:下来需要根据安装的浏览器版本,下载合适的chromedriver驱动程序. 4:接着需要将下载的chromedriver进行解压,并将文件 ...

  3. Codeforces 961 容斥叉积判共线 树状数组递增思想题

    A B C D 给你N个点 问你能不能有两条直线穿过这N个点 首先假设这N个点是可以被两条直线穿过的 所以两条直线就把这N个点划分成两个集合 我们取1 2 3三个点这样必定会有两个点在一个集合内 ch ...

  4. centos 安装samba

    1 安装 yum install samba samba-client samba-common -y 2 配置 vim /etc/samba/smb.conf 在最下面增加 [wolbo] path ...

  5. windows javaee 安装

    一. 下载jdk 并安装 二. 配置环境变量 JAVA_HOME:D:\Java\jdk1..0_25 CLASSPATH :.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt. ...

  6. 前端每日实战：11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...

  7. 前端之CSS：属性操作2

    css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.te ...

  8. 【Luogu4221】[WC2018] 州区划分

    题目链接 题目描述 略 Sol 一个州合法就是州内点形成的子图中 不存在欧拉回路(一个点也算欧拉回路). 这个东西显然就状压 dp 一下: 设 \(f[S]\) 表示当前考虑了 \(S\) 这个集合内 ...

  9. 一个错误导致懂了mac系统的PATH环境变量

    一个完全不懂mac系统的强迫症小白,由于搭建环境都按照百度走,所以在执行命令echo $PATH查看PATH内容时发现怎么有这样一串东西 /usr/local/bin:/usr/bin:/bin:/u ...

  10. SQL Server参数优化

    内存参数: 此处为512G物理内存,一般来说设置为物理内存80%左右,设置过大资源不会自动释放,内存可能会持续增长:设置过小资源浪费. CPU参数: 最大工作线程数: 此处为4个CPU40核,调整后物 ...