Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信；

我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的；

实例：

初始加载界面：

初始界面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>非父子关系组件之间的通信</title>

</head>

    <body>

        <div >

            <my-component-a></my-component-a>

            <my-component-b></my-component-b>

        </div>

    </body>

    <template id="template-a">

        <div>

            <h1>my-component-a</h1>

            <hr />

        </div>

    </template>

    <template id="template-b">

        <div>

            <h2>my-component-b</h2>

            <hr />

        </div>

    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script type="text/javascript">

        let comA = {

            template :  "#template-a",

        }

        let comB = {

            template :  "#template-b",

        }

        new Vue({

            data : {

            },

            components : {

                "my-component-a" : comA,

                "my-component-b" : comB

            }

        }).$mount("div");

    </script>

</html>

使用监听事件后：

添加的监听事件的代码：

    let comA = {

            template :  "#template-a",

            data(){

                return {

                    name:'perfect'

                }

            },

            methods:{

                sendData(){

                    vm.$emit('send-event-a',this.name);

                }

            }

        }

        let comB = {

            data(){

                return{

                    nameB:''

                }

            },

            template :  "#template-b",

            mounted(){

                vm.$on('send-event-a',name=>{//监听数据

                        console.log(this);

                    this.nameB=name;

                })

            }

        }

        let vm=new Vue({

            data:{

                msg:'cool'

            }

        });

        new Vue({

            data : {

            },

调用事件部分：

<template id="template-a">

        <div>

            <h1>my-component-a</h1>

            comA name:<span>{{name}}</span>

            <button @click="sendData">发送数据给comB</button>

            <hr />

        </div>

    </template>

    <template id="template-b">

        <div>

            <h2>my-component-b</h2>

            comB name:<span>{{nameB}}</span>

            <hr />

        </div>

    </template>

最终代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>非父子关系组件之间的通信</title>

 </head>

     <body>

         <div >

             <my-component-a></my-component-a>

             <my-component-b></my-component-b>

         </div>

     </body>

     <template id="template-a">

         <div>

             <h1>my-component-a</h1>

             comA name:<span>{{name}}</span>

             <button @click="sendData">发送数据给comB</button>

             <hr />

         </div>

     </template>

     <template id="template-b">

         <div>

             <h2>my-component-b</h2>

             comB name:<span>{{nameB}}</span>

             <hr />

         </div>

     </template>

     <script type="text/javascript" src="../js/vue.js" ></script>

     <script type="text/javascript">

         let comA = {

             template :  "#template-a",

             data(){

                 return {

                     name:'perfect'

                 }

             },

             methods:{

                 sendData(){

                     vm.$emit('send-event-a',this.name);

                 }

             }

         }

         let comB = {

             data(){

                 return{

                     nameB:''

                 }

             },

             template :  "#template-b",

             mounted(){

                 vm.$on('send-event-a',name=>{//监听数据

                         console.log(this);

                     this.nameB=name;

                 })

             }

         }

         let vm=new Vue({

             data:{

                 msg:'cool'

             }

         });

         new Vue({

             data : {

             },

             components : {

                 "my-component-a" : comA,

                 "my-component-b" : comB

             }

         }).$mount("div");

     </script>

 </html>

非父子关系组件之间的通信

Vue 组件&组件之间的通信 之 非父子关系组件之间的通信的更多相关文章

  1. Vue_(组件通讯)非父子关系组件通信

    Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...

  2. vue-自主研发非父子关系组件之间通信的问题

    相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...

  3. Vue组件通信之非父子组件传值

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...

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

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

  5. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

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

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

  7. Vue组件传值（二）之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  8. vue非父子关系之间通信传值

    第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  9. vue 父子之间通信及非父子之间通信

    直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...

随机推荐

  1. Mongodb 副本集+分片

    mongodb的分片功能是建立在副本集之上的,所以首先我们尝试着配置副本集. docker启动3个已经安装好mongo的镜像 # docker run -idt --name mongodb_01 m ...

  2. python中剔除字典重复项，可以使用集合（set）。

    使用集合(set)剔除字典中的重复项(value). 1)具体例子: #甲乙丙丁使用的编程语言programming_languages = { '甲':'java', '乙':'python', ' ...

  3. day23:类的命名空间和组合

    1,类属性:静态属性,方法:动态属性:双下init方法,每当我们调用类的时候就会自动的触发这个方法,默认传self,在init方法里面可以对self赋值:在类的内部,self就是一个对象,我们自己实例 ...

  4. flask读书笔记

    学习flask的一个很好的网站:http://www.pythondoc.com/flask-mega-tutorial/helloworld.html ======================= ...

  5. delphi 自动获取串口

    delphi 自动获取串口   https://blog.csdn.net/Nevermore_anger/article/details/79012875    版权声明:本文为博主原创文章,未经博 ...

  6. Autofac之自动装配

    从容器中的可用服务中选择一个构造函数来创造对象,这个过程叫做自动装配.这个过程是通过反射实现的 默认 思考这么一个问题,如果注册类型中存在多个构造函数,那么Autofac会选择哪一个来创建类型的实例 ...

  7. 解决loadrunner录制时 Request Connection: Remote Server @ 0.0.0.0:80 (Service=?) NOT PROXIED! (REASON: Unable to connect to remote server: rc = -1 , le = 0)问题

    环境为win7+ie8+loadrunner11,录制脚本回放查看Recoding log 出现如下错误:[Net An. Error    ( 7f8:1340)] Request Connecti ...

  8. Spring Boot 对请求的映射

    在SpringBoot中对请求资源的映射有三种方式: 1.通过编写一个Controller请求,获得客户端发送过来的请求就转发出去 //通过这种方式可以来映射页面请求路径 @PostMapping(& ...

  9. 【转】Spring Boot 构建应用——快速构建 Spring Boot 应用

    Spring Boot 简化了 Spring 应用开发,不需要配置就能运行 Spring 应用,Spring Boot 的自动配置是通过 Spring 4.x 的条件注解 @Conditional 来 ...

  10. Es6的用法

    var callBack=[]; // 这个等于是个闭包,i会累加到3在做运算,所以结果都是6 ;i<=;i++) { callBack[i]=function(){ ; } } console ...