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

补充$emit ,$on的讲解

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

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

    <script>

        //准备一个空的实例对象

        var Event=new Vue();

        var A={

            //ES6新写法

            template:`

                <div>

                    <span>我是A组件</span> -> {{a}}

                    <input type="button" value="把A数据给C" @click="send">

                </div>

            `,

            methods:{

                send(){

                    Event.$emit('a-msg',this.a);//触发事件，发送数据

                }

            },

            data(){

                return {

                    a:'我是a数据'

                }

            }

        };

        var B={

            //注意：一个组件是一个单个作用域，这里的a是局部变量，不是组件a里面的数据

            template:`

                <div>

                    <span>我是B组件</span> -> {{a}}

                    <input type="button" value="把B数据给C" @click="send">

                </div>

            `,

            methods:{

                send(){

                    Event.$emit('b-msg',this.a);

                }

            },

            data(){

                return {

                    a:'我是b数据'

                }

            }

        };

        var C={

            template:`

                <div>

                    <h3>我是C组件</h3>

                    <span>接收过来的A的数据为: {{a}}</span>

                    <br>

                    <span>接收过来的B的数据为: {{b}}</span>

                </div>

            `,

            data(){

                return {

                    a:'',

                    b:''

                }

            },

            mounted(){   //生命周期(ready)挂载的时候调用

                //var _this=this;

                //接收A组件的数据

                Event.$on('a-msg',function(a){//监听事件，接收数据

                    this.a=a;

                }.bind(this));

                //接收B组件的数据

                Event.$on('b-msg',function(a){

                    this.b=a;

                }.bind(this));

            }

        };

        window.onload=function(){

            new Vue({

                el:'#box',

                components:{

                    'com-a':A,

                    'com-b':B,

                    'com-c':C

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <com-a></com-a>

        <com-b></com-b>

        <com-c></com-c>

    </div>

</body>

</html>

　对代码的个人理解：

1.　发送数据的组件里面

//ES6新写法

template:`

   <div>

      <span>我是A组件</span> -> {{a}}

      <input type="button" value="把A数据给C" @click="send">

   </div>

   `,

 methods:{

     send(){

          Event.$emit('a-msg',this.a);//触发事件，发送数据

      }

 },

2.　接收数据的组件里面

Event.$on('a-msg',function(a){//监听事件，接收数据

           this.a=a;

}.bind(this));

3.　ES6语法

//ES6新写法 ：`` 键盘Esc下面的键，数字1左边的键，里面字符串之间可以用空格

template:`

            <div>

                <span>我是A组件</span> -> {{a}}

                <input type="button" value="把A数据给C" @click="send">

            </div>

          `,

单一事件中心管理组件通信( 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. 手把手教你实现自己的abp代码生成器

    代码生成器的原理无非就是得到字段相关信息(字段名,字段类型,字段注释等),然后根据模板,其实就是字符串的拼接与替换生成相应代码. 所以第一步我们需要解决如何得到字段的相关信息,有两种方式 通过反射获得 ...

  2. 为什么IIS的应用池回收设置默认为1740分钟-20180720

    [非原创,个人收集,希望大家有感触] 你可曾留心过IIS的应用池回收设置默认值是多少?1740分钟对吗,那么为什么会是这样的数值呢? 在asp.net的某篇博客里提到了这个问题. 有关微软产品的许多决 ...

  3. CSS 样式属性

    大小 width   宽               body {   min-width:1200px; height  高                      }               ...

  4. 大菲波数(Fibonacci)java大数(hdu1715)

    大菲波数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...

  5. Spring全家桶系列–[SpringBoot入门到跑路]

    //本文作者:cuifuan Spring全家桶————[SpringBoot入门到跑路] 对于之前的Spring框架的使用,各种配置文件XML.properties一旦出错之后错误难寻,这也是为什么 ...

  6. springboot学习-springboot使用spring-data-jpa操作MySQL数据库

    我们在上一篇搭建了一个简单的springboot应用,这一篇将介绍使用spring-data-jpa操作数据库. 新建一个MySQL数据库,这里数据库名为springboot,建立user_info数 ...

  7. 你不知道的JavasScript上篇·第三章·对象

    1.Object.defineProperty()&&getter.setter Object.defineProperty(目标对象,属性名(string型),{ get:funct ...

  8. CentOS7安装maven3.6.1

    1.下载maven的tar.gz安装包 2.移到centos7中并解压 tar -xzvf maven.tar.gz 3.开始配置maven环境变量,通过命令 vim /etc/profile 4.配 ...

  9. 【读书笔记】iOS-网络-应用间通信

    一,URL方案 URL方案有3个主要用途:根据设备上其他应用的存在与否调整逻辑,切换到其他应用以及响应打开你的应用的其他应用.你还可以通过URL方案从某个站点或是在基于Web的认证流程结束是打开应用. ...

  10. js 四种调用模式和this的关系总结

    更新: 这篇又简单又明了啊喂 首先看这一篇, 很简单很清楚了,http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascri ...