1   vm.$on( event, callback )

　　监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数.

2 vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="js/vue.js"></script>

 </head>

 <body>

 <!--view-->

 <div id="app">

     <xiongda></xiongda>

     <xionger></xionger>

 </div>

 <script>

     var bus=new Vue();

     Vue.component('xiongda',{template:`

         <div>

         <h3>我是熊大</h3>

         <button @click="noticex2">通知熊二</button>

 </div>

     `,methods:{

         noticex2:function () {

             //$emit是用于触发定义在熊二<xionger>的自定义事件my-eventX2,'加传递过去的参数'

             bus.$emit('my-eventX2','光头强来了');

         }

     },

         mounted:function () {

         bus.$on('noticex1',function (msg) {

             //用于创建noticex1，可以接收$emit传递的消息

             console.log(msg);

         })

     }

     });

     Vue.component('xionger',{template:`

         <div>

         <h3>我是熊二</h3>

         <button @click="sendtoda">通知熊大 </button>

 </div>

     `,

         mounted:function () {

             //通知熊二的方法写在钩子函数中

             //第一个参数表示创建一个自定义事件

             bus.$on('my-eventX2',function (msg) {

                 console.log(msg);

             })

         },methods:{

         sendtoda:function () {

             bus.$emit('noticex1',"熊大，我收到消息了，立马过去！")

         }

         }

     });

     new Vue({ //viewmodel

         el: 'div',

         data: {msg: 'Hello EN', dd: 'you are welcome!'}//model

     });

 </script>

 </body>

 </html>

==========================全家桶式的兄弟通信过程====================================

vuejs兄弟通信$emit和$on的更多相关文章

  1. vuejs兄弟组件之间的通信

    var Event = new Vue();//准备一个空的实例对象 //A组件 var A = { template: ` <div> <span>我是A组件的数据-> ...

  2. VUe兄弟通信

    用过Vue,你肯定知道,Vue组件之间的通信常见的有$dispatch - 通过冒泡的方式传递事件$broadcast - 通过广播的方式向子孙组件传递事件 如果组件之间的关系只是父-子关系,那么di ...

  3. iframe通信相关：父操作子，子操作父，兄弟通信

    这里写window和document是认为代表了BOM和DOM(个人理解不一定对) 拿到了window就能操作全局变量和函数 拿到了document就能获取dom,操作节点 父操作子 window:选 ...

  4. vuejs组件通信

    <body> <div id="example"> <father></father> </div> </body ...

  5. vue的$emit 与$on父子组件与兄弟组件的之间通信

    本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...

  6. Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. angularjs $emit $on $broadcast 父子 兄弟之间传值

    父子之间 <div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> ...

  8. vue2.0s中eventBus实现兄弟组件通信

    在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...

  9. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

随机推荐

  1. 在MVC视图中将数字转换为string类型后保留两位小数

    <td>@item.recharge_reward_rate.ToString("F2")%</td> @*保留小数两位*@ <td>@item ...

  2. .htaccess设置301跳转及常用技巧整理

    在虚拟主机环境中,基本上都是Apache环境.Apache的伪静态的设置,都是在网站根目录设置.htaccess文件,在.htaccess文件中无论是伪静态, 还是301跳转,甚至是防盗链和禁止某个I ...

  3. Matplotlib 日期格式转换

    官网链接:https://matplotlib.org/api/dates_api.html#matplotlib.dates.date2num import numpy as np import d ...

  4. .gitignore 文件没起作用

    场景 修改了.gitignore文件, 但是查看状态还是没有忽略 解决 *. 清除git缓存, 注意最后有一个点 git rm -r --cache . 再之后就可以正常使用了, 基本恢复正常, 被忽 ...

  5. 3.Python爬虫入门_正则表达式(简单例子)

    #2019-11-23 import requests import time import re #Python正则表达式库 if __name__=='__main__': #海量爬取图片数据 # ...

  6. C++学习二 vector的用法(使用sort对于vector排序)

    一.vector的介绍 vector是C++里面的一个容器,也是我们数学上面理解的向量,有一些比较常见的操作. 二.vector的定义 #include<vector> using nam ...

  7. mysql命令大全一

    mysql -u root -p;create database qa;show databases;use qa; create table results(id int not null auto ...

  8. MySQL学习笔记3——DCL

    DCL(数据控制语言) 1.创建用户 *CREATE USER 用户名@IP地址 IDENTIFIED BY '密码'; >用户只能在指定的IP地址上登录*CREATE USER 用户名@'%' ...

  9. 详解C++ STL multiset 容器

    详解C++ STL multiset 容器 本篇随笔简单介绍一下\(C++STL\)中\(multiset\)容器的使用方法及常见使用技巧. multiset容器的概念和性质 \(set\)在英文中的 ...

  10. 关于字符串在ie浏览器拼接问题

    常用的字符串在ie浏览器拼接不识别的问题,建议不要使用字符串拼接,可直接用jquery添加方便快捷一些