<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

    </head>

    <body>

        <div id="app1">

            <com-a></com-a>

            <com-b></com-b>

            <com-c></com-c>

        </div>

    </body>

    <script>

        var A={

            template:`

                <div>

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

                    <input type ="button" value ="把A数据传给C">

                </div>

            `,

            data(){

                return{

                    a:'我是a数据'

                }

            }

        };

        var B={

            template:`

                <div>

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

                    <input type ="button" value ="把B数据传给C">

                </div>

            `,

            data(){

                return{

                    b:'我是b数据'

                }

            }

        };

        var C={

            template:`

                <div>

                    <span>我是组件C</span> -->{{c}}

                    <input type ="button" value ="把C数据传给A">

                </div>

            `,

            data(){

                return{

                    c:'我是c数据'

                }

            }

        };

        var app =new Vue({

            el:"#app1",

            data:{

                    a:'我是父组件的数据'

            },

            /*//子组件,利用props进行数据传递:*/

            components:{

                'com-a':A,

                'com-b':B,

                'com-c':C

            }

        });

    </script>

</html>

案例基础页面:

展示结果:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

    </head>

    <body>

        <div id="app1">

            <com-a></com-a>

            <com-b></com-b>

            <com-c></com-c>

        </div>

    </body>

    <script>

        /*全局的*/

        var vm =new Vue();

        var A={

            template:`

                <div>

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

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

                </div>

            `,

            data(){

                return{

                    a:'我是a数据'

                }

            },

            methods:{

                send(){

                    vm.$emit('a-msg',this.a)

                }

            }

        };

        var B={

            template:`

                <div>

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

                    <input type ="button" value ="把B数据传给C">

                </div>

            `,

            mounted(){

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

                    alert(a);

                    this.b =a;

                    /*将this绑定给当前函数,引用当前函数*/

                }.bind(this));

            },

            data(){

                return{

                    b:'我是b数据'

                }

            }

        };

        var C={

            template:`

                <div>

                    <span>我是组件C</span> -->{{c}}

                    <input type ="button" value ="把C数据传给A">

                </div>

            `,

            data(){

                return{

                    c:'我是c数据'

                }

            }

        };

        var app =new Vue({

            el:"#app1",

            data:{

                    a:'我是父组件的数据'

            },

            /*//子组件,利用props进行数据传递:*/

            components:{

                'com-a':A,

                'com-b':B,

                'com-c':C

            }

        });

    </script>

</html>

之前结果:

传递之后的值:

vue.js组件之j间的通讯三,通过单一事件来管理组件通讯的更多相关文章

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

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

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

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

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

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

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

  5. vue.js组件之j间的通讯一 子组件接受父祖件数据

    Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

  6. vue.js组件之j间的通讯二

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

  7. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

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

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

  9. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

随机推荐

  1. 2016.2.24 利用用户控件和委托完美解决快速选择txbbox

    1.首先将tet_box和一个datagridview控件打包成用户控件uC_QuickTxtBox 2.在用户控件中定义执行主窗口的委托函数 3.主窗体中添加用户控件的load事件,赋值 uC_Qu ...

  2. 2015.3.3 VC++6制作MFC dll并在其中使用对话框、引入类的操作

    上例建立的dll为非MFC的,不能使用MFC框架,如CString.对话框等类型,使用起来有一定限制.可以建立MFC的Dll来改进.建立MFC Dll的方法: 1.在VC6中新建工程时选择:MFC A ...

  3. 问题：C#属性；结果：c# 属性

    c# 属性 属性:get { //读属性代码 } set { //写属性代码 } public class Person{private string name;public string Name{ ...

  4. doker 笔记（1） 架构

    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...

  5. matlab学习笔记（4）

    第9章 数学建模函数 曲线拟合: 多项式拟合: polyfit()函数:采用最小二乘法进行多项式拟合. polyfit(x,y,n);   %对于数据集[x,y],找到次数为n的多项式. [p E] ...

  6. 为SSRS配置SMTP服务器身份验证

    此处设置外邮地址却无法填写邮箱密码 一.安装SMTP服务 1.在服务管理器中单击“功能” 2.单击“添加功能”打开“添加功能向导”对话框 3.在“选择功能”页上选择“SMTP服务器”并选择“添加必须的 ...

  7. 关于static的继承问题

    今天研究了一下被static修饰的变量和方法,在子类中继承的问题,网上也看了别人的博客,自己也动手试了一下 代码如下 //父类 package com.xujingyang.test; public ...

  8. strstr()查找函数,strchr(),strrchr(),stristr()/strpos()，strrpos()查找字符串位置

    在一个较长的字符串这查找匹配的字符串或字符,其中strstr()和strchr()是完全一样的. 例: echo strstr('why always you','you'); 输出: you 如果为 ...

  9. c#循环语句 for 循环嵌套的练习。还有跳转语句，异常语句，迭代穷举介绍

    先说一下循环嵌套:循环嵌套就是再一个循环里面再放一个循环,也就是说如果没一个循环都循环10次,那么第一个循环是1的时候,嵌套的循环会循环十次.也就是10*10的效果. for 循环语句 主要还是逻辑思 ...

  10. java中怎么把String转化为字符数组呢？

    我想让用户输入一组字符串,然后将这个字符串的每一个赋给一个char.即,abcde char ch[]=new char[5]; ch[0]=a;ch[1]=b;..... 解决方案如下图所示: St ...