同时这个概念也是相对的，因为袋子里面可能又装了一个小袋子，而这个小袋子相对它里面的模块，同样也是父子组件。
然后子组件可以自己定义一些事件，通用的信息，无关父组件，基本可以随意引用。
概述
每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。
在vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中，import Hello from './components/Hello'，那么App.vue 就是父组件，components 文件夹下的Hello.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。
父------子
父组件向子组件传值, 它主要是通过元素的属性进行的. 在App.vue 的template中,有一个, 这就是我们引入的子组件. 给其添加属性如mes-father="message from father" 父组件将数据传递进去,子组件需要接收才能使用. 怎样接收呢?
在Hello.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应.
注意： 在父组件,就是在 元素中定义的属性是mes-father， 没有一一对应啊? 这主要是因为，在html 元素中大小写是不敏感的。 如果我们写成， 里面的mesFather 就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据， 如果在js 文件中，我们定义props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的， 只能写成props: ["mesfather"]. 但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是- 表示，它 自动会转化成驼峰式。传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。props 属性是和data，methods 属性并列的，属同一级别。props 属性里面定义的变量，在 子组件中的template 中可以直接使用。
App.vue文件：
Hello.vue文件：
这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。
子------父
子组件向父组件传递数据，需要用到自定义事件。 例如，我们在Hello.vue，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。
在Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter
Hello.vue文件：
在App.vue 中，template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据{{childMes }}</p>
相应地，在scrpit中，data 中，定义一个变量childMes, 并在methods 中，定义一个事件处理函数reciever。
App.vue文件：
这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。
当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter， 在enter 中， 我们发射了一个事件valueUp， 并携带了一个参数，由于在<hello @valueUp=”recieve”></hello>组件中， 我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件， 当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。
谢谢！结束！
Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。
父组件注入，子组件接收。
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。
ref ：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children ：访问父 / 子实例
$attrs： 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners ：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
vuex的详细使用方法： vuex管理状态仓库使用详解
a.vue 引用了一个detail组件
第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。
两个初始化事件中心的方法：
第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。
假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。
接下来，我们需要在 B页面 中接收这则消息。
同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：
如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
如果想移除事件的监听，可以像下面这样操作：
$on 事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。
可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。
或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。
因为页面跳转的时候 ，a页面在之前已经emit了，但是b页面首次并没有created，b页面还监听不到。
可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经可以触发了
所以可以，在beforeDestory的时候，$emit事件。例如：
【参考eventbus实战记录： https://www.jianshu.com/p/fde85549e3b0 】
