有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

补充$emit ,$on的讲解

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         //准备一个空的实例对象
  15.         var Event=new Vue();
  16.  
  17.         var A={
  18.             //ES6新写法
  19.             template:`
  20.                 <div>
  21.                     <span>我是A组件</span> -> {{a}}
  22.                     <input type="button" value="把A数据给C" @click="send">
  23.                 </div>
  24.             `,
  25.             methods:{
  26.                 send(){
  27.                     Event.$emit('a-msg',this.a);//触发事件，发送数据
  28.                 }
  29.             },
  30.             data(){
  31.                 return {
  32.                     a:'我是a数据'
  33.                 }
  34.             }
  35.         };
  36.         var B={
  37.             //注意：一个组件是一个单个作用域，这里的a是局部变量，不是组件a里面的数据
  38.             template:`
  39.                 <div>
  40.                     <span>我是B组件</span> -> {{a}}
  41.                     <input type="button" value="把B数据给C" @click="send">
  42.                 </div>
  43.             `,
  44.             methods:{
  45.                 send(){
  46.                     Event.$emit('b-msg',this.a);
  47.                 }
  48.             },
  49.             data(){
  50.                 return {
  51.                     a:'我是b数据'
  52.                 }
  53.             }
  54.         };
  55.         var C={
  56.             template:`
  57.                 <div>
  58.                     <h3>我是C组件</h3>
  59.                     <span>接收过来的A的数据为: {{a}}</span>
  60.                     <br>
  61.                     <span>接收过来的B的数据为: {{b}}</span>
  62.                 </div>
  63.             `,
  64.             data(){
  65.                 return {
  66.                     a:'',
  67.                     b:''
  68.                 }
  69.             },
  70.             mounted(){   //生命周期(ready)挂载的时候调用
  71.                 //var _this=this;
  72.                 //接收A组件的数据
  73.                 Event.$on('a-msg',function(a){//监听事件，接收数据
  74.                     this.a=a;
  75.                 }.bind(this));
  76.  
  77.                 //接收B组件的数据
  78.                 Event.$on('b-msg',function(a){
  79.                     this.b=a;
  80.                 }.bind(this));
  81.             }
  82.         };
  83.  
  84.         window.onload=function(){
  85.             new Vue({
  86.                 el:'#box',
  87.                 components:{
  88.                     'com-a':A,
  89.                     'com-b':B,
  90.                     'com-c':C
  91.                 }
  92.             });
  93.         };
  94.     </script>
  95. </head>
  96. <body>
  97.     <div id="box">
  98.         <com-a></com-a>
  99.         <com-b></com-b>
  100.         <com-c></com-c>
  101.     </div>
  102. </body>
  103. </html>

　对代码的个人理解：

1.　发送数据的组件里面

  1. //ES6新写法
  2. template:`
  3.    <div>
  4.       <span>我是A组件</span> -> {{a}}
  5.       <input type="button" value="把A数据给C" @click="send">
  6.    </div>
  7.    `,
  8.  methods:{
  9.      send(){
  10.           Event.$emit('a-msg',this.a);//触发事件，发送数据
  11.       }
  12.  },

2.　接收数据的组件里面

  1. Event.$on('a-msg',function(a){//监听事件，接收数据
  2.            this.a=a;
  3. }.bind(this));

3.　ES6语法

  1. //ES6新写法 ：`` 键盘Esc下面的键，数字1左边的键，里面字符串之间可以用空格
  2. template:`
  3.             <div>
  4.                 <span>我是A组件</span> -> {{a}}
  5.                 <input type="button" value="把A数据给C" @click="send">
  6.             </div>
  7.           `,

单一事件中心管理组件通信( vuex )的更多相关文章

  1. webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

  2. vue2 单一事件中心管理组件通信

  3. vue30-单一事件管理组件通信: vuex

    ------------------------------------------------------ 可以单一事件管理组件通信: vuex var Event=new Vue(); Event ...

  4. vuejs组件交互 - 02 - 事件中心管理组件间的通信

    事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...

  5. vue.js组件之j间的通讯四,通过单一事件来管理组件通讯

    总结; 首先需要创建是一个空实例: var vm = new Vue(); vm.$emit(事件,数据); vm.$on(事件,function(data){ }bind(this))

  6. vue.js组件之j间的通讯三,通过单一事件来管理组件通讯

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 刚学的vue.js的单一事件管理组件通信

    第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题 说说思路 首先 第一步,准备一个空的示例对象 var Event=new Vue(); 第二步,准备发送的数据 Event.$em ...

  8. vue2.X 组件通信（$emit $on props）

    1.index.html  子组件直接修改父组件的数据 组件通讯: vm.$emit(); vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前,子组件可以更改父组 ...

  9. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

随机推荐

  1. 吉哥系列故事——临时工计划(dp)

    吉哥系列故事——临时工计划 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...

  2. 最新版本Bootstrap样式很奇怪(4.1版本)

    下载最新版4.1版的Bootstrap编译好的CSS,引入的样式及其怪异. 这种情况重新下载3.3.7低版本就可以了.

  3. Bootstrap4响应式布局之栅格系统

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...

  4. 【代码笔记】iOS-产生随机数

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  5. ionic 项目内部更新用到的插件，退出app插件

    一 cordova-plugin-app-version插件  用来获取APP版本 ionic plugin add cordova-plugin-app-version -----cordova-p ...

  6. windows 10安装jdk8

    1.下载jdk,选择jdk软件版本和对应windows 32/64位版本 jdk下载链接:https://www.oracle.com/technetwork/java/javase/download ...

  7. mui中图片手势缩放功能的实现

    MUI框架,要实现手势缩放图片,可以使用imageviewer组件来实现.代码很简单: 引入css: <link href="assets/css/mui.imageviewer.cs ...

  8. eclipse代码中每行的开始和结尾出现多余的特殊符号

    window -> preferences -> general -> editors -> text editors ->          show whitespa ...

  9. Linux find查找指定文件 按照名称 然后cp拷贝到指定目录且指定文件名

    最近有一个需求,需要将指定目录下的文件(已知文件名)复制到另一个指定的目录且重命名文件. 要求: 在var目录下会定义系统的启动日志相关信息,请查找对应的boot.log文件,并把它备份一份到var/ ...

  10. AJAX四种跨域处理方法

    同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名. ...