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. SSIS - 2.使用脚本任务弹出对话框

    步骤如下: 1.打开Visual Studio 2012或者SSDT工具->单击“文件”->选择"新建"打开创建新工程的对话框如下: 2.在"Business ...

  2. php抓取图片进行内容提取解析，文字性pdf进行内容文字提取解析

    2018年7月7日18:52:17 php是用纯算法,自己是提取图片内容不是不行,可以但是优化起来很麻烦还得设计学习库,去矫正数据的正确率 对于大多数项目来说,如果不是做ocr服务,就不必要做需求工具 ...

  3. Head First Python-Python中与文件相关的操作-读、处理、写

    最近在看head first python,前面也写了一些笔记,但是基本上没有涉及到一些完整的代码,现在将书中的文件相关操作的代码整理,供以后参考. 主要分为两大部分,读取文件.处理异常,处理文件.存 ...

  4. flask读书笔记

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

  5. NOIP2018 游记 QAQ

    写在前面: 本人初三党.NOIP前两个月不好好停课搞信竞愣是要搞文化课.于是,期中考与NOIP一起凉凉[微笑] 本人写的第一篇NOIP游记,各位大佬们随便看一看就好 Day -n 初赛71,竟然跟wx ...

  6. 第一次接触Android Studio

    生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4390905.html

  7. app启动过程

    调用main函数之前: App开始启动后,系统首先加载可执行文件(自身App的所有.o文件的集合),然后加载动态链接库dyld.交由 ImageLoader 读取 image,其中包含了我们的类.方法 ...

  8. 【Eclipse】-NO.163.Eclipse.1 -【Eclipse springboot 1.x 创建maven工程初始化报错】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  9. react脚手架搭建

    1.npm install -g create-react-app 2.create-react-app react-demo 3.cd react-demo 4.npm start

  10. Linux的发展历史

    创始人: linux操作系统由林纳斯·本纳第克特·托瓦兹编写而成,是管理电脑硬件以及运行电脑软件的操作系统. 创始发展过程:Linux操作系统的诞生.发展和成长过程始终依赖着五个重要支柱:UNIX 操 ...