关键词：
1.前言
Vue框架倡导组件化开发，力求将一个大的项目拆分成若干个小的组件，就如同我们小时玩堆积木一样，一个大房子是由若干个小积木组成。组件化开发最大问题就是组件之间数据能够流通，即组件之间能够通信。而组件间通信无非就分为三种情况：外层的大组件向内部的小组件通信，内部的小组件向外部的大组件通信，平级之间组件通信。说的官方一点就是：
- 父组件与子组件通信
- 子组件与父组件通信
- 非父子组件通信
针对这三种情况，下面将一一展开介绍。
2.父组件 — —> 子组件
父组件向子组件传递数据通过props。通俗的讲就是：父组件在调用子组件时，在子组件标签内传入形如key=value属性，而子组件内部用props去接住父组件传来的key，进而再拿到传来的value值。
举个栗子：
我们现在有这样一个需求：
在某个项目中，包含了若干个顶部标题栏，而每个顶部标题栏的标题都各不一样，我们希望能够实现一个通用的标题栏组件，使得在之后需要标题栏的地方直接调用这个组件，并只需在调用的时候传入所要显示的标题文字，来满足标题栏相同而标题各不相同的需求。
上述需求是一个经典的父组件向子组件通信（传递数据）的需求，通用的标题栏组件时子组件，父组件是调用该标题栏的父组件，父组件传入不同的标题文字，子组件来渲染父组件所需要的标题。话不多说，直接上代码：
子组件代码：
1 //子组件代码 2 <template> 3 <div class="header"> titleText </div> 4 </template> 5 6 <script> 7 export default 8 name: "Child", 9 props:[‘title‘], 10 data() 11 return 12 titleText:this.title 13 14 15 16 </script> 17 18 <style scoped> 19 .header 20 width: 100%; 21 height: 100px; 22 background-color: #ccc; 23 text-align: center; 24 font-size: 50px; 25 line-height: 100px; 26 27 </style>
父组件代码：
1 //父组件代码 2 <template> 3 <div id="app"> 4 <Child :title="msg"></Child> 5 </div> 6 </template> 7 8 <script> 9 import Child from ‘./Child‘ 10 export default 11 name: ‘app‘, 12 components: 13 Child 14 , 15 data () 16 return 17 msg:‘难凉热血‘ 18 19 20 21 </script> 22 23 <style> 24 * 25 margin: 0; 26 padding: 0; 27 28 </style>
从上面代码中，我们可以看到，父组件在调用子组件时，向子组件传递了一个名为title的属性，同时该title属性对应了父组件自己内部的一个值msg，传递过去后，子组件通过自己本身的props选项中的title来接住父组件传过来的值，接着再将拿到的数据应用到自己需要的地方。这样，就完成了父组件向子组件通信的过程。
我们也就完成了上面提出的需求，我们只需在需要标题栏的地方调用该组件并且在调用的时候传入我们想要的title值即可。
3.子组件 — —> 父组件
子组件向父组件传递数据需要借助内建的
$emit方法通过事件的方式来传递。
$emit方法是vue实例的一个方法，该方法就像一个广播，亦或者像一个信号发射器，该方法接受两个参数：
1 vm.$emit(‘信号名字‘,‘信号数据’)
- 第一个参数：信号名字。即我要发射的这个信号的名字，我有可能发射多个信号，信号名字用于区分各个信号
- 第二个参数：信号数据。即发射出的真实的信号内容，也就是数据。
再举个栗子：
想象这么一个情景：我军准备发动一次军事行动，行动代号：“打狗”。行动内容：“攻打美国白宫，实现全球统一！！！”那么由中央军委发射信号，军队接收信号。代码如下：
中央军委发射信号：
1 中央军委.$emit(‘打狗‘,‘攻打美国白宫，实现全球统一！！！‘)
军队接收信号：
1 军队.$on(‘打狗‘,function(data) 2 //data就是接收到的信号内容：攻打美国白宫，实现全球统一！！！ 3 console.log(data) 4 )
OK，了解了上述过程，我们就可以实现子组件向父组件通信，由子组件发射信号，父组件接收信号。
子组件代码如下：
1 //子组件代码 2 <template> 3 <div class="header"> 4 <p>我是子组件，我要向父组件传递的数据是：msg</p> 5 <button @click="emit">发射</button> 6 </div> 7 </template> 8 9 <script> 10 export default 11 name: "Child2", 12 data() 13 return 14 msg: "攻打美国白宫，实现全球统一！！！" 15 16 , 17 methods: 18 emit() 19 this.$emit(‘dagou‘,this.msg) 20 21 22 23 </script> 24 25 <style scoped> 26 .header 27 width: 100%; 28 height: 100px; 29 background-color: #ccc; 30 text-align: center; 31 32 </style>
父组件代码：
1 //父组件代码 2 <template> 3 <div id="app"> 4 <Child @dagou="go"></Child> 5 <p>我是父组件，我接收到子组件传递的数据是：msg</p> 6 </div> 7 </template> 8 9 <script> 10 import Child from ‘./Child2‘ 11 export default 12 name: ‘app‘, 13 components: 14 Child 15 , 16 data () 17 return 18 msg:‘‘ 19 20 , 21 methods: 22 go(data) 23 this.msg = data 24 25 26 27 28 </script> 29 30 <style> 31 * 32 margin: 0; 33 padding: 0; 34 35 </style>
效果如图：
从上面代码中，我们可以看到，子组件点击发射按钮之后，广播了一个名为dagou的信号，同时发出了信号数据：“攻打美国白宫，实现全球统一！！！”（子组件第19行代码），与此同时，父组件监听@dagou信号（父组件第4行代码），当监听到dagou信号后，调用自身的go函数，同时go函数接受到了传来的数据，这样，就完成了子组件向父组件通信的过程。
4.非父子组件通信
所谓非父子组件，指的是这两个组件没有任何关系，有可能这两个组件各自存在于不同于的父组件内，那么，这种情况下两个组件又该如何通信呢？
在通常情况下，两个非父子组件要进行简单的通信，我们会一般采用中央事件总线的机制，说白了，就是找一个中间传话人，A组件要与B组件说话，那A组件就先给中间传话人说，然后由中间传话人告诉B组件。
那么，在代码中，我们会实例化一个空的vue实例组件用来充当这个中间传话人，请看如下代码：
用于中间传话的空vue组件代码：
1 //eventBus空组件，什么也不写，只用于传话 2 <template> 3 4 </template> 5 6 <script> 7 import Vue from ‘vue‘ 8 export default new Vue(); 9 </script> 10 11 <style scoped> 12 13 </style>
A组件代码：
1 //A组件代码 2 <template> 3 <div> 4 <p>我是A组件，我要给B组件说：toBmsg</p> 5 <button @click="say">对B说</button> 6 </div> 7 </template> 8 9 <script> 10 import eventBus from ‘./eventBus‘ 11 export default 12 name: "A", 13 data() 14 return 15 toBmsg:"hello,我是A组件" 16 17 , 18 methods: 19 say() 20 eventBus.$emit(‘haha‘,this.toBmsg) 21 22 23 24 </script> 25 26 <style scoped> 27 28 </style>
B组件代码：
1 //B组件代码 2 <template> 3 <p>我是B组件，我听到A组件给我说：msgText</p> 4 </template> 5 6 <script> 7 import eventBus from ‘./eventBus‘ 8 export default 9 name: "B", 10 data() 11 return 12 msgText:‘‘ 13 14 , 15 created() 16 let self = this; 17 eventBus.$on(‘haha‘,function (data) 18 //此处没有用this，是因为此处的this指向了eventBus 19 self.msgText = data 20 ) 21 22 23 </script> 24 25 <style scoped> 26 27 </style>
效果如图：
至此，三种情况下的组件间通信的方式介绍完毕。
（完）
通俗易懂了解vue双向绑定原理及实现(代码片段)
...括了，但是其内部的实现方式还是值得深究的，本文就以通俗易懂的方式剖析Vue内部双向绑定原理的实现过程。2.思路分析所谓MVVM数据双向绑定，即 查看详情
react组件间通信（常用方式，简单易用）(代码片段)
...c;以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。一、父子组件通信原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。首先，... 查看详情
vue组件之间通信传值
原文链接：https://blog.csdn.net/lander_xiong/article/details/79018737我认为这位博主的这篇文章写的非常详细，通俗易懂，我们这次的vue项目，子组件之间通信就用了博主这个方法，建立公共bus,很易懂也很实用。 查看详情
通俗易懂了解vue的计算属性(代码片段)
1.前言之前在学习vue的过程中，一直没有搞明白计算属性是个怎么回事，以及为什么要有计算属性，使用计算属性有什么好处。今天花时间翻了翻官方文档，才搞清楚其中一二，现将学习心得总结记录如下。2.为什么要使用计算... 查看详情
vue中8种组件传参方式(代码片段)
? vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系,才更容易理解他们的通信方式,就好像过年回家，坐着一屋... 查看详情
vue的通信方式---祖父孙三个级别的之间的隔代通信(代码片段)
...，子父，以及兄弟组件之间的通信，可以通过这个传送门了解他们：Vue通信方式（一）当我们如果遇到祖组件，父组件，孙组件，三个级别嵌套时，我们该怎么在祖组件与孙组件之间通信呢，当然通过本地存储或者Vuex都可以实... 查看详情
vue之父子组件之间的通信方式(代码片段)
（一）props与$emit<!-这部分是一个关于父子组件之间参数传递的例子--><!--父组件传递参数到子组件是props，子组件传递参数到父组件是用事件触发$emit--><!OCTYPEhtml><html><head><metacharset="UTF-8"><title></ti... 查看详情
vue组件之间的通信(代码片段)
前言作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex)。通信方式根据组件之间的关系有不同之处。组件关系有下面三种：父-->子、子-->父、非父子父-->子父向子传递数据通过props**父组件代码**<template... 查看详情
vue兄弟通信(代码片段)
用过Vue，你肯定知道，Vue组件之间的通信常见的有$dispatch -通过冒泡的方式传递事件$broadcast -通过广播的方式向子孙组件传递事件如果组件之间的关系只是父-子关系，那么dispatch,broadcast其实就足够了。但是有天需求变了... 查看详情
vue组件间的通信方式(代码片段)
一、组件间通信的概念组件是vue最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。通信指的是发送者通过某种媒... 查看详情
vue中组件通信的方式(代码片段)
目录props$emitref和$ref实现父子组件之间的通信全局事件总线bus创建一个事件总线bus组件间传值(这里用于兄弟组件传值)依赖注入（provide/inject）$parent/$childrenvuex通信插槽slot匿名插槽(默认插槽)具名插槽作用域插槽propsprops只... 查看详情
vue中组件通信的方式(代码片段)
目录props$emitref和$ref实现父子组件之间的通信全局事件总线bus创建一个事件总线bus组件间传值(这里用于兄弟组件传值)依赖注入（provide/inject）$parent/$childrenvuex通信插槽slot匿名插槽(默认插槽)具名插槽作用域插槽propsprops只... 查看详情
通俗易懂--快速入门vue--1(代码片段)
原有设计模式：MVPM模型数据V视图触发事件P控制器负责业务逻辑新设计模式：MVVMM层script主要M层开发面向数据编程V层htmlVM层进行逻辑（自动改变）VM层？？？？？？虚拟dom???defineproxy模式？？？项目组件化每个组件就是页面区域... 查看详情
vue的$emit与$on父子组件与兄弟组件的之间通信(代码片段)
本文主要对vue 用$emit与$on来进行组件之间的数据传输.主要的传输方式有三种：1.父组件到子组件通信2.子组件到父组件的通信3.兄弟组件之间的通信 一、父组件传值给子组件父组件给子组件传子，使用props//父组件：parent.v... 查看详情
vue组件通信方式居然有这么多？你了解几种(代码片段)
大家好，我是漫步，Vue组件通信经常需要用到，分享一篇总结文章，喜欢记得关注我并设为星标。vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只... 查看详情
vue组件间通信六种方式（完整版）(代码片段)
vue组件间通信六种方式（完整版）前言组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A和B、B和C、B和D... 查看详情
vue组件间通信六种方式（完整版）(代码片段)
组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A和B、B和C、B和D都是父子关系，C和D是兄弟关系，A和C... 查看详情
vue组件之间的通信(代码片段)
vue组件间的通信有父--->子、子--->父、非父子之间的通信虽然我们稍微复杂的项目都用vuex来管理了，但是还是想写一篇关于有父--->子、子--->父、非父子之间通信的文章。下面通过代码来讲述父--->子组件间的通信父级... 查看详情