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基础 第八章课后习题

    1.什么是二重循环?在内层循环中使用continue和break语句,程序如何跳转? 答:二重循环就是一个循环结构体内又包含另一个完整的循环结构. continue语句跳转时是跳过了内层循环中的剩余语 ...

  2. 嵌入式linux内存越界定位和解决 （转）

    https://blog.csdn.net/meejoy/article/details/41729585 https://blog.csdn.net/killmice/article/details ...

  3. Digest of Overview of Linux Kernel Security Features

    Linux kernel Security: I. DAC: Discretionary Access Control, the core security model of UNIX. II. PO ...

  4. filter 过滤器的基本使用

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. RxSwift + Moya + ObjectMapper

    https://www.jianshu.com/p/173915b943af use_frameworks! target 'RXDemo' do pod 'RxSwift' pod 'RxCocoa ...

  6. Linux 部署 xxl-job 注意问题

    问题:Failed to create parent directories for [/data/applogs/xxl-job/xxl-job-admin.log][原因:权限不足] 启动终端: ...

  7. 2018-2019-2 20165336 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165336 <网络对抗技术> Exp6 信息搜集与漏洞扫描 一.原理与实践说明 1.实践内容 本实践的目标是掌握信息搜集的最基础技能.具体有: 各种搜索技巧的 ...

  8. 设置光标聚焦输入框（EditText）并弹出软键盘（在适配器中设置）

    参考代码: public void setFocusEditTextAndShowSoftInput(final EditText editText){ editText.setFocusable(t ...

  9. FPGA验证之SystemVerilog+UVM

    [转载]https://blog.csdn.net/lijiuyangzilsc/article/details/50879545     数字芯片和FPGA的验证.主要是其中的功能仿真和时序仿真. ...

  10. 消息中间件解决方案JMS

    1. JMS入门 1.1消息中间件 1.1.1品优购系统模块调用关系分析 我们现在讲品优购已经完成的功能模块梳理如下: 我们已经完成了5个web模块和4个服务模块.其中运营商后台的调用关系最多,用到了 ...