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. Java作业二（2017-9-18）

    /*程序员龚猛,求整数各个位上的和*/ import java.util.Scanner; public class Helloworld{ public static void main(Strin ...

  2. sql server2012远程连接用IP登陆进入设置步骤

    第一步:把数据库上要设置的设置好. ↑这步是不是要,我也没弄清楚. 第二部是数据库的配置: 你的电脑图标,右击管理. 以上就是所有步骤. 再次登陆成功.

  3. Python Learning - Three

    1. Set  Set is a collection which is unordered and unindexed. No duplicate members In Python sets ar ...

  4. linux CentOS 安装 nginx

    官方网址:http://nginx.org/en/download.html 一.安装基础组件 yum install gcc-c++ yum install pcre yum install pcr ...

  5. linux CentOS YUM 安装 nginx+tomcat+java+mysql运行环境

    Java环境配置 1 安装JDK 查看CentOS自带JDK是否已安装 1 [root@test ~]# yum list installed |grep java 若有自带安装的JDK,应如下操作进 ...

  6. [Day25]IO(Properties、序列化流、打印流、Commons-IO)

    1.Properties类-持久的属性集,可保存在流中或从流中加载,属性列表中每个键及其对应值都是一个字符串 1.1 特点 (1)Hashtable的子类,map集合中的方法都可以用 (2)该集合没有 ...

  7. [daily]gtk程序不跟随系统的dark主题

    问题描述: 我的系统主题是dark的.在使用mysql-workbench是,里边的一些线条就跟随了系统文字的主要使用了灰白色. 这样在白色画布里就看不见这些线条了. 方法: 设置mysql-work ...

  8. VC Edit控件单行垂直居中和定制外框的实现

    Edit控件很奇怪,不在WM_PAINT里面画图,且外框也不在WM_NCPAINT里面画,客户区就是整个窗口,非客户区没有.也没有垂直居中风格可以设置.在界面排版的时候,看起来怪怪的. 下面提供Edi ...

  9. SpringBoot单元测试

    一.Service层Junit单元测试 需要的jar包 <dependency> <groupId>org.springframework.boot</groupId&g ...

  10. Android系统裁剪：手把手教你如何进行系统裁剪

    前言:android系统裁剪优化一直是各个厂商定制产品的关键步骤,包括浅层次的去除不必要的apk(android apk裁剪定制 )和深层次的裁剪整个编译系统和框架层.   android作为开源系统 ...