组件之间通信（兄弟组件）

兄弟组件数据传递

1.路由URL参数

在传统开发时我们常常把需要跨页面传递的数据放到url后面，跳转到另外页面时直接获取url字符串获取想要的参数即可，在vue跨组件时一样可以这么做，

// router index.js 动态路由
        {
           path:'/params/:Id',
           component:Params,
           name：Params
        }

  // 跳转路由
        <router-link :to="/params/12">跳转路由</router-link>

  在跳转后的组件中用$route.params.id去获取到这个id参数为12，但这种只适合传递比较小的数据，数字之类的

2.Bus通信

在组件之外定义一个bus.js作为组件间通信的桥梁，适用于比较小型不需要vuex又需要兄弟组件通信的

　　1）.bus.js中添加如下

import Vue from 'vue'
      export default new Vue

　　2.）组件中调用bus.js通过自定义事件传递数据

import Bus from './bus.js'
      export default {
          methods: {
             bus () {
                Bus.$emit('msg', '我要传给兄弟组件们')
             }
          }
      }

　　3）.兄弟组件中监听事件接受数据

import Bus from './bus.js'
        export default {
            mounted() {
               Bus.$on('msg', (e) => {
                 console.log(e)
               })
             }
           }

注：以上两种使用场景并不高所以只是简略提一下，这两点都是很久以前写过，以上例子网上直接搜集而来如有错误，指正

Vuex集中状态管理 vuex是vue的集中状态管理工具，对于大型应用统一集中管理数据，很方便，在此对vuex的用法并不过多介绍只是提一下使用过程中遇到的问题

　　规范：对于多人开发的大型应用规范的制定是至关重要的，对于所有人都会接触到的vuex对其修改数据调用数据都应有一个明确严格的使用规范　　　　vuex分模块：项目不同模块间维护各自的vuex数据

　　　　限制调用：只允许action操作数据，getters获取数据，使用mapGetters，mapActions辅助函数调用数据

*   对于vuex的使用场景也有一些争论，有人认为正常组件之间就是要用父子组件传值的方式，即使子组件需要使vuex中的数据也应该由父组件获取再传到子组件中，但有的时候组件间嵌套很深，只允许父组件获取数据并不是一个方便的方法，所以对于祖先元组件与子组件传值又有了新问题，vue官网也有一些方法解决，如下

祖先组件于子组件间的数据传递

provide/inject 除了正常的父子组件传值外，vue也提供了provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效官网实例

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
}

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：

　　在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的：

　　 from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)

　　default 属性是降级情况下使用的 value

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide/inject还未在项目中应用过，后面会做尝试