------------------------------------------------------

可以单一事件管理组件通信:    vuex

    var Event=new Vue();

    Event.$emit(事件名称, 数据)

    Event.$on(事件名称,function(data){

        //data

    }.bind(this));
<!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={    //A组件

            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={

            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(){

                //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>

<!--

我是A组件 -> 我是a数据  把A数据给C

我是B组件 -> 我是b数据  把B数据给C

我是C组件

接收过来的A的数据为: 我是a数据

接收过来的B的数据为: 我是b数据

-->

vue30-单一事件管理组件通信: vuex的更多相关文章

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

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

  2. vuejs单一事件管理组件间的通信

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

  3. 单一事件中心管理组件通信( vuex )

    有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: 补充$emit ,$on的讲解 代码: <!DOCTYPE html> <h ...

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

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

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

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

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

  7. Vue 兄弟组件通信（不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  8. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧！

    状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...

  9. jquery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...

随机推荐

  1. BZOJ 2794 [Poi2012]Cloakroom（离线+背包）

    2794: [Poi2012]Cloakroom Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 406  Solved: 241[Submit][St ...

  2. BZOJ 1195 [HNOI2006]最短母串 (Trie图+状压+bfs最短路)

    BZOJ1195 LOJ10061 题目大意:给你$n$个模式串,求一个最短且字典序最小的文本串并输出这个串,$n<=12,len<=50$ 首先对所有模式串构造$Trie$图,$Trie ...

  3. mayan 游戏 search

    纯搜索,,,模拟,,还不算太难,,就是细节略繁琐 首先因为题目要求保证字典序,所以显然把右边的块换到左边不如把左边的块换到右边优, 所以可以进行不小规模的剪枝,之后显然交换两块相同的色块没有意义,至此 ...

  4. Android Studio生成apk

    1.菜单Build->Generate Signed APK 2.生成android.keystore,能够依据弹框去Create new一个,也可使用命令来生成android.keystore ...

  5. numeric and int in sql server

    类型映射 https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/sql-server-data-type-mappings C#关 ...

  6. 让IE9以下版本的浏览支持html5,CSS3的插件

    随着html5(后面用h5代表)标签越来越广泛的使用,IE9以下(IE6-IE8)不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:bl ...

  7. 三分钟明白 Activiti工作流 -- java运用_转载

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

  8. 事件处理：pull与push

    push:对应函数调用:属于发起方主动型 pull :对应消息循环:模型为信息池+事件循环+派发:属于接收者主动: 通常这种模式的角色对应于消息中心(事件派发中心). 观察者模式:变化+派发.

  9. NodeJS学习笔记 进阶 (10)Nodejs 进阶：log4js入门实例(ok))

    个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...

  10. CF620E New Year Tree(线段树+二进制）

    题解 弱智题,二进制表示位数.合并时用| 就是被1<<x卡了好久. 要写成1ll<<x才行 #include<iostream> #include<cstri ...