组件通信

组件通信是什么：

什么是组件化： 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。可以使代码复用，维护性高，方便测试
组件通信之间的关系：

组件通信有几种方式：

1. 父传子：主要通过 props 来实现的

• 具体实现：父组件通过 import 引入子组件，并注册，父亲组件通过 v-bind指令给子组件绑定一个属性，标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式：一是通过数组形式prpos：[‘要接收的属性’ ]。二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

3. 子传父：主要通过$emit 来实现

• 具体实现： 子组件通过通过绑定事件触发函数， 在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit 中有两个参数一是要派发的自定义事件，第二个参数是要传递的值
• 大家心中可能会有如下几个问题：
  问题1：props接收的money和子组件上绑定的自定义属性money是不是同一个？
  答：一般都是，我们通常会把自定义属性和数据写成一致
  问题2：为什么data要定义为一个函数？
  答：组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据。也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内。js最大的特征就是：函数式编程
  问题3：为什么data要有返回值？返回值还是一个对象？
  答：因为Vue是通过observer来观察data选项的，所以必须要有返回值。因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

3. 兄弟组件传值：

• 方法一：通过 event bus 实现具体实现：
  创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus。
  在组件 A 中通过 bus. $ emit（’自定义事件名’，要发送的值）发送数据
  在组件 B中通过 bus. $ on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据

var vm = new Vue({
    el: '#app'
  })
  // 自定义事件的定义（ 发布 ）
  // vm.$on(自定义事件的名称，自定义事件的事件处理程序)
  vm.$on( 'aa', function () {
    console.log( 'aa' )
  })
  //自定义事件的触发 （ 订阅 ）
  // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)
  vm.$emit( 'aa' )

• 方法二：通过 vuex 实现
  具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态