核心要点：

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

            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>

Vue2--非父子组件通信笔记的更多相关文章

  1. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

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

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

  3. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  4. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  5. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  6. vue组件通信之非父子组件通信

    什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以 ...

  7. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  8. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  9. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

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

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

随机推荐

  1. Yota Phone宣告破产

    作为双面屏手机的开山鼻祖,Yota Phone已经消失在大家的视线中. 据外媒报道称,开曼群岛最高法院裁定在开曼群岛注册的YotaPhone手机生产商Yota Devices公司破产.法院的相关裁定被 ...

  2. POJ 1126：Simply Syntax

    Simply Syntax Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5264   Accepted: 2337 Des ...

  3. 出现这样的错误提示： E: Sub-process /usr/bin/dpkg returned an error code

    1.$ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名2.$ sudo mkdir /var/lib/dpkg/info ...

  4. MySLQ排序后标记排行

    查询排行及所有(表名.*) 1. ; AS top, customer.* FROM customer 2. AS top, customer.* ) r, customer ORDER BY cus ...

  5. Python属性和内建属性

    属性property 1. 私有属性添加getter和setter方法 class Money(object): def __init__(self): self.__money = 0 def ge ...

  6. Axure下载，附注册码

    下载地址:https://www.axure.com.cn/3510/ 汉化教程:https://www.axure.com.cn/2616/ 注册码: Axure RP 8.1.0.3377--可用 ...

  7. 文献阅读 - MonoLoco与关于Camera Matrix的笔记

    目录 概览 HighLights Camera Intrinsic Matrix 笔记 Intrinsic Matrix Task-Error - 不确定性任务下确界的计算 输出假设的Laplace分 ...

  8. 实验吧Web-难-猫抓老鼠

    看题目好像就有让我们抓包的意思. 不管输什么走势一个结果:Check Failed! 也用bp爆破了,但是出不来什么结果. 抓到包后,送到repeater中go一下,发现有一串base64码,以为解码 ...

  9. WebServerInitializedEvent &ApplicationRunner

    application.properties app.name=yaoyuan2 app.dept.id=1 MyConfig.java import lombok.AllArgsConstructo ...

  10. Caused by: com.mysql.cj.exceptions.DataReadException: Zero date value prohibited

    原因:数据库日期出现零值,即0000-00-00 属于一个无效日期. 解决方案:重新赋值,或者在jdbc链接后加参数zeroDateTimeBehavior=convertToNull