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

1.路由URL参数和localStorage（可忽略）

在传统开发时我们常常把需要跨页面传递的数据放到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，但这种只适合传递比较小的数据，数字之类的

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array

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)
               })
             }
           }

3.Vuex集中状态管理

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

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

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

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

4.$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

• // index.vue
  <template>
    <div>
      <h2>浪里行舟</h2>
      <child-com1
        :foo="foo"
        :boo="boo"
        :coo="coo"
        :doo="doo"
        title="前端工匠"
      ></child-com1>
    </div>
  </template>
  <script>
  const childCom1 = () => import("./childCom1.vue");
  export default {
    components: { childCom1 },
    data() {
      return {
        foo: "Javascript",
        boo: "Html",
        coo: "CSS",
        doo: "Vue"
      };
    }
  };
  </script>

  // childCom1.vue
  <template class="border">
    <div>
      <p>foo: {{ foo }}</p>
      <p>childCom1的$attrs: {{ $attrs }}</p>
      <child-com2 v-bind="$attrs"></child-com2>
    </div>
  </template>
  <script>
  const childCom2 = () => import("./childCom2.vue");
  export default {
    components: {
      childCom2
    },
    inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
    props: {
      foo: String // foo作为props属性绑定
    },
    created() {
      console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
    }
  };
  </script>

  // childCom2.vue
  <template>
    <div class="border">
      <p>boo: {{ boo }}</p>
      <p>childCom2: {{ $attrs }}</p>
      <child-com3 v-bind="$attrs"></child-com3>
    </div>
  </template>
  <script>
  const childCom3 = () => import("./childCom3.vue");
  export default {
    components: {
      childCom3
    },
    inheritAttrs: false,
    props: {
      boo: String
    },
    created() {
      console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
    }
  };
  </script>

  // childCom3.vue
  <template>
    <div class="border">
      <p>childCom3: {{ $attrs }}</p>
    </div>
  </template>
  <script>
  export default {
    props: {
      coo: String,
      title: String
    }
  };
  </script>

  

  如上图所示$attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4 提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。

  简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

  5、provide/inject

  Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。
  provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

  假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

  // A.vue
  export default {
    provide: {
      name: '浪里行舟'
    }
  }

  // B.vue
  export default {
    inject: ['name'],
    mounted () {
      console.log(this.name);  // 浪里行舟
    }
  }

  可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。

  需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue 官方文档
  所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。

  provide 与 inject 怎么实现数据响应式

  一般来说，有两种办法：

  • provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods
  • 使用 2.6 最新 API Vue.observable 优化响应式 provide(推荐)

  我们来看个例子：孙组件 D、E 和 F 获取 A 组件传递过来的 color 值，并能实现数据响应式变化，即 A 组件的 color 变化后，组件 D、E、F 不会跟着变（核心代码如下：）

  

  // A 组件
  <div>
        <h1>A 组件</h1>
        <button @click="() => changeColor()">改变color</button>
        <ChildrenB />
        <ChildrenC />
  </div>
  ......
    data() {
      return {
        color: "blue"
      };
    },
    // provide() {
    //   return {
    //     theme: {
    //       color: this.color //这种方式绑定的数据并不是可响应的
    //     } // 即A组件的color变化后，组件D、E、F不会跟着变
    //   };
    // },
    provide() {
      return {
        theme: this//方法一：提供祖先组件的实例
      };
    },
    methods: {
      changeColor(color) {
        if (color) {
          this.color = color;
        } else {
          this.color = this.color === "blue" ? "red" : "blue";
        }
      }
    }
    // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
    // provide() {
    //   this.theme = Vue.observable({
    //     color: "blue"
    //   });
    //   return {
    //     theme: this.theme
    //   };
    // },
    // methods: {
    //   changeColor(color) {
    //     if (color) {
    //       this.theme.color = color;
    //     } else {
    //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
    //     }
    //   }
    // }

  // F 组件
  <template functional>
    <div class="border2">
      <h3 :style="{ color: injections.theme.color }">F 组件</h3>
    </div>
  </template>
  <script>
  export default {
    inject: {
      theme: {
        //函数式组件取值不一样
        default: () => ({})
      }
    }
  };
  </script>

  虽说 provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！

  总结

  常见使用场景可以分为三类：

  • 父子通信：
    父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
  • 兄弟通信：
    Bus；Vuex
  • 跨级通信：
    Bus；Vuex；provide / inject API、$attrs/$listeners