vue组件通信

vue深层的组件间通信

需求：当我们有一个组件的层级结构为 组件1 >> 组件2 >> 组件3的时候怎样通信最好

方案

1. 通过最常用的props和$emit来实现组件间的传值

  缺点：随着组件的嵌套的层级增多，每层的父组件都要监听子组件$emit发射的事件，太繁琐

2. 通过this.$parent和this.$children来相互调用组件的值或方法实现通信

  缺点：这个可以避免props和$emit的问题，但是假设我想在组件3用引用组件1的方法来改变某一个变量时，这时我们用这样写this.$parent.$parent，这样就很鸡肋，而且还必须管理父组件的层级，太不灵活

3. 通过eventBus来实现多层组件间的数据共享

  分析：eventBus实际上就是通过将共享的变量存在新建的一个vue的实例上，然后通过该实例的$emit和$on去实现数据的传递

  代码：

      eventBus.js

      import Vue from 'vue'

      export default new Vue()

      组件1

      import bus from 'common/js/eventBus'

      export default {

        methods: {

          busEmit() {

            bus.$emit('busEmit', '我是组件1发送的值')

          }

        },

        created() {

          this.busEmit()

        }

      }

      组件3

      import bus from 'common/js/eventBus'

      export default {

        created() {

          bus.$on('busEmit', (data) => {

            console.log(data)

          })

        }

      }

  优势：对于某一个多层嵌套的组件而言，他不会太繁琐

  缺点：但是对于有多个这种组件都要做多层件的传值时，由于所有共享值都是有这一个vue的实例去发送的，因此这种方案就不利于项目后期的状态维护，且耦合度也比较高

4. 通过vuex这个状态管理来共享数据

  分析：vuex可能是最常用的跨组件和跨页面的通信方式了，它相比于eventBus的方案，由于它可以将不同模块的数据进行模块化管理，通过namespace的方式访问，这使得其可维护性相对于前者比较高，并且也降低了数据转态之间的耦合

  缺点：假设如果有上百个组件都是这种嵌套的情况，那vuex也就要维护这些组件的一些数据和状态，组件内部要不停的去通过mutations,actions操作数据的变化，写法上就太麻烦了

5. 通过provide/inject来跨组件通信

  代码

      组件A

     

     

      组件b

     

     

      组件c

     

     

  总结：这钟是目前来说比较好的方式，因为每个嵌套组件的状态是相对独立的，由他们自身去控制和维护，在写法上也比较简单，并且可以通过from字段定义引用的来源，以此来减少耦合

6. 在组件中使用inheritAttrs和$attrs传递数据

      组件a

     

     

      组件b

     

     

      组件c

     

     

  总结：

  这种方式值的传递也是单向的，当传递一个引用类型的数据是，在子组件修改此参数数据，也会影响父级组件，但是它不会报错，当你传入的参数与子组件内部的props同名是,此时的$attrs会将该重复的数据去除掉，如果你中间的组件传一个名字相同的参数时，此时后面的会覆盖前面的同名参数的值。

[vue.md](./upload/201911/23/15744928021101847029.md)