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

可以单一事件管理组件通信:    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. selenium自动化(二).........................................Demo篇

    二 编写简单代码 简单代码一:   demo1.py 1.from selenium import webdriver driver = webdriver.Chrome() driver.get(& ...

  2. vue:element-ui时间选择器限制只能点不能输入

    原文链接:点我 <el-form-item label="门店成立日期" prop="storeSetupDate"> <template&g ...

  3. [置顶] Netty学习总结（1）——Netty入门介绍

    1．Netty是什么? Netty是一个基于JAVA NIO类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. 2．使用Netty能够做什么? 开发异步.非阻 ...

  4. [terry笔记]11gR2_DataGuard搭建_拷贝数据文件

    11gR2搭建dataguard环境: 自己做的实验,后续按照rman模式搭建.主备切换.模式调整等实验会陆续发上来. primary: OS:oel 6.4 database:11.2.0.4.0 ...

  5. [Python]Use Flask-Admin with PostgreSQL

    This code recipe gives you an idea of how to use Flask-Admin with postgresql database. from flask im ...

  6. VS2008 集成Lua解释器

    1. 登陆官网下载源代码 -> www.lua.org -> get started ->  installing  选择系统类型(这里是Windows的,所下面载 luaDist) ...

  7. NGUI研究之开发项目的一些使用心得比較细节

     不知不觉使用NGI插件已经有一段时间了.感觉NGUI真的是眼下Unity3D中最好用的UI插件. 可是它也有一些不是BUG的BUG,这些问题可能会让新人摸不着头脑,那么这篇文章将总结一下这段时间 ...

  8. C# Hook

    C# Hook原理及EasyHook简易教程 前言 在说C# Hook之前,我们先来说说什么是Hook技术.相信大家都接触过外挂,不管是修改游戏客户端的也好,盗取密码的也罢,它们都是如何实现的呢? 实 ...

  9. 1355: [Baltic2009]Radio Transmission

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 958  Solved: 659[Submit][Status][Discuss] Description ...

  10. iOS菜鸟成长笔记（3）——斯坦福公开课学习（1）

    一.iOS四层结构 1.Core OS 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSIX标准的一个Unix核心.这一层包含或者说是提供了整个iPhone OS的一些基础功能, ...