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. 解决 AutoMapper ProjectTo 不起作用的问题

    这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL ...

  2. mvc模式的理解

    一开始总是觉得dao层和service层没有区别,甚至觉得service层根本就是多余的,service层就是把dao层的内容调用了一下,然后重写了一次,后来才理解到,dao层是数据链路层,是与数据库 ...

  3. 腾讯云CDB回档失败浅析

    Ⅰ.先看问题 先简单介绍下cdb的回档功能,回档分为极速.快速.普通,分别对应指定表.指定库.整个实例回档. 控制台报错回档任务执行失败 提示信息:rollback table failed:SQL ...

  4. STM32 STOP模式唤醒后的时钟

    进了STOP模式后,PLL停掉了,所以,如果开始的时钟配置,用的是PLL,那么唤醒后,需要重新配置RCC. 如果使用的是PLL,及时是用MSI作为时钟源,放大出来的,比如4M的MSI,PLL放大到48 ...

  5. Confluence实现附件下载权限的控制

    背景: 公司为了方便的管理过程文档,搭建了一个Confluence服务器,版本6.9.在使用过程中,需要按照用户对空间中上传的附件进行下载权限控制. 解决过程及处理方案: 一.Confluence中导 ...

  6. 安卓点击home键重启

    主要原因是:每次启动Intent导致新创建Task的时候,该Task会记录导致其创建的Intent:而如果后续需要有一个新的与创建Intent完全一致(完全一致定位为:启动类,action.categ ...

  7. Spark入门到精通--（第八节）环境搭建（Hadoop搭建）

    上一节把Centos的集群免密码ssh登陆搭建完成,这一节主要讲一下Hadoop的环境搭建. Hadoop下载安装 下载官网的Hadoop 2.4.1的软件包.http://hadoop.apache ...

  8. Powershell的IIS管理小结

    现在微软是积极地拥抱Linux,并推出了net core,服务器也提供无UI的版本,提高服务器的性能.很多云平台也提供了无UI版本的windows服务器,所以IIS的命令管理已经非常的重要了.在网上找 ...

  9. kubernetes集群应用部署实例

    今天,我们将要带来入门hello world示例,它是一个web留言板应用,基于PHP+Redis的两层分布式架构的web应用,前端PHP web网站通过访问后端Redis数据库完成用户留言的查询和添 ...

  10. Freeswitch配置之sofia

    SIP模块 - mod_sofia SIP 模块是 FreeSWITCH的主要模块. 在 FreeSWITCH中,实现一些互联协议接口的模块称为 Endpoint.FreeSWITH支持很多的 End ...