Vue组件之间的通信方式（个人理解）

1. props(父传子)

```

  //父组件 parent.vue

  <template>

      //子组件

      <child-com :num="num" :str="str" :obj="obj" :func="func" />

  </tempalte>

  //引入子组件

  import ChildCom from './components/child';

  export default{

    components:{ChildCom},

    data(){

      return {

          num:25,

          str:'这是一个字符串类型的父组件传递的值',

          obj:{

              attr:'一个对象中的属性值'

          }

      }

    },

    methods:{

      func(){

          console.log('这是一个父组件的方法，可以由子组件通过props方式调用');

      }

    }

  }

  //子组件 child.vue

  export default{

      props:{

          num:{

              type:Number//num的类型为---数字类型

          },

          str:{

              type:String,//str的类型为---字符串类型

              default:'hello default value'//str的默认值

          },

          obj:{

              type:Object,//obj的类型为---对象类型

              reqired:true//是否必传的参数，布尔值true：必须传这个参数 ，默认为false：不是必传

          },

          func:{

              type:Function, //func的类型为---函数

              default(){  //不传递时默认值

                  return ()=>{}

              }

          }

      },

      data(){

        return{}

      },

      mounted(){

        console.log(this.num);

        //控制台输出：25

        console.log(this.str);

        //控制台输出：这是一个字符串类型的父组件传递的值

        console.log(this.obj);

        //控制台输出：{attr:'一个对象中的属性值'}

        this.func();

        //调用parent的func方法

        //控制台输出：这是一个父组件的方法，可以由子组件通过props方式调用

      }

  }

```

2. v-on/this.$emit('方法名','参数');(父传子，子通过调用父传来的方法回传参数)

```

//(父传子，子通过调用父传来的方法回传参数)

//父组件： @childMethod="parentMethod" 

//子组件： this.$emit('方法名',参数)

//childMethod:child子组件中this.$emit('childMethod',参数)

//parentMethod:parent父组件中的要被子组件调用的方法名

  //父组件 parent.vue

  <template>

      //子组件

      <child-com :num="num" :str="str" :obj="obj" @func="func" />

  </tempalte>

  //引入子组件

  import ChildCom from './components/child';

  export default{

    components:{ChildCom},

    data(){

      return {

          num:25,

          str:'这是一个字符串类型的父组件传递的值',

          obj:{

              attr:'一个对象中的属性值'

          }

      }

    },

    methods:{

      func(arguments){

          console.log('这是一个父组件的方法，可以由子组件通过props方式调用',arguments);

      }

    }

  }

  //子组件 child.vue

  export default{

      props:{

          num:{

              type:Number//num的类型为---数字类型

          },

          str:{

              type:String,//str的类型为---字符串类型

              default:'hello default value'//str的默认值

          },

          obj:{

              type:Object,//obj的类型为---对象类型

              reqired:true//是否必传的参数，布尔值true：必须传这个参数 ，默认为false：不是必传

          }

      },

      data(){

        return{}

      },

      mounted(){

        console.log(this.num);

        //控制台输出：25

        console.log(this.str);

        //控制台输出：这是一个字符串类型的父组件传递的值

        console.log(this.obj);

        //控制台输出：{attr:'一个对象中的属性值'}

        this.$emit('func',参数);

        //调用parent的func方法

        //控制台输出：这是一个父组件的方法，可以由子组件通过props方式调用,参数

      }

  }

```

3. this.$refs.child.method(arguments);(父传子)

```

//child：为子组件ref注册的名字，可自行命名

//method:为子组件中的方法名

  //父组件 parent.vue

  <template>

      //子组件

      <child-com ref="child" />

  </tempalte>

  //引入子组件

  import ChildCom from './components/child';

  export default{

    components:{ChildCom},

    data(){

        return{}

    }

    methods:{

      func(){

        this.$refs.child.childMethod();

        //控制台输出：我是子组件的方法，父组件通过this.$refs.child.childMethod()调用

      }

    }

  }

  //子组件 child.vue

  export default{

    props:{},

    data(){

      return{}

    },

    mounted(){},

    methods:{

      childMethod(){

        console.log('我是子组件的方法，父组件通过this.$refs.child.childMethod()调用');

      }

    }

  }

```

4. this.$parent.$parent.func(arguments);(子传父)

```

//父组件的fun方法

  //父组件 parent.vue

  <template>

      //子组件

      <child-com  />

  </tempalte>

  //引入子组件

  import ChildCom from './components/child';

  export default{

    components:{ChildCom},

    data(){

      return {}

    },

    methods:{

      func(arguments){

          console.log('这是一个父组件的方法，可以由子组件通过this.$parent.$parent(参数)方式调用',arguments);

      }

    }

  }

  //子组件 child.vue

  export default{

      props:{ },

      data(){

        return{}

      },

      mounted(){

      this.$parent.$parent.func('参数');

        //调用parent的func方法

        //控制台输出：这是一个父组件的方法，可以由子组件通过this.$parent.$parent(参数)方式调用,参数

      }

  }

```

5. this.$attrs:里面包含所有父组件中不作为 prop传递的属性。可以进行跨级的参数传递

```

//(父传子---属性)

//可修改this.$atrrs里的属性值

  //父组件 parent.vue

  <template>

    <child-com str="这是一个不通过prop传递的字符串" :strProp="strProp" />

  </template>

  export default {

    data(){

      return {

          strProp:"这是一个通过prop传递的字符串"

      }

    },

  }

  //子组件 child.vue

  <tempalte>

    <grand-child v-bind="$attrs" /> //针对向下级组件传递

  </temaplate>

  import GrandChildCom from './grandchild';

  export default {

    components:{GrandChildCom},

    props:{

        strProp:{

            type:String,

            default:''

        }

    },

    data(){

        return {}

    },

    mounted(){

        console.log(this.$atrrs);//{str:'这是一个不通过prop传递的字符串'}

        console.log(this.strProp);//这是一个通过prop传递的字符串

    }

  }

  //孙子组件GrandChild.vue

  export default {

    props:{

        strProp:{

            type:String,

            default:''

        }

    },

    data(){

        return {}

    },

    mounted(){

        console.log(this.$atrrs);//{str:'这是一个不通过prop传递的字符串'}

        console.log(this.strProp);//这是一个通过prop传递的字符串

    }

  }

```

6. this.$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

```

//(父传子---方法，子通过调用父传来的方法回传参数)

//this.$listeners

  //父组件 parent.vue

  <template>

    <child-com @handleUpdate="handleUpdate" @handleAdd.native="handleAdd" />

  </template>

  export default {

    data(){

      return {}

    },

    methods:{

        handleUpdate(val){

            console.log('这是handleUpdate的日志',val);

        },

        handleAdd(){

            console.log('这是handleAdd的日志');

        },

    }

  }

  //子组件 child.vue

  <tempalte>

    <grand-child-com v-on="$listeners" /> //针对向下级组件传递

  </temaplate>

  import GrandChildCom from './grandchild';

  export default {

    components:{GrandChildCom},

    props:{},

    data(){

        return {}

    },

    mounted(){

        console.log(this.$listeners);//{handleUpdate:f}

        console.log(this.$listeners.handleUpdate('child调用的'));//这是handleUpdate的日志,child调用的

    }

  }

  //孙子组件GrandChild.vue

  export default {

    props:{

        strProp:{

            type:String,

            default:''

        }

    },

    data(){

        return {}

    },

    mounted(){

        console.log(this.$listeners);//{handleUpdate:f}

        console.log(this.$listeners.handleUpdate('grandChild调用的'));//这是handleUpdate的日志,grandChild调用的

    }

  }

```

7. provide/inject(选项 / 组合)：允许一个祖先组件向其所有子孙后代注入一个依赖，可以注入属性和方法，从而实现跨级父子组件通信

```

//(父传子---依赖，子通过调用父传来的方法回传参数)

// provide/inject

  //父组件 parent.vue

  <template>

    <child-com  />

  </template>

  export default {

    data(){

      return {

          name:'Hello Xiaoer'

      }

    },

    provide() {

      return {

        provideName: {

          name: this.name,

          change: (val) => {

            console.log( val )

          }

        }

      }

    }

  }

  //子组件 child.vue

  <tempalte>

    <grand-child-com  /> //针对向下级组件传递

  </temaplate>

  import GrandChildCom from './grandchild';

  export default {

    components:{GrandChildCom},

    props:{},

    data(){

        return {}

    },

    inject: ['provideName'],

    mounted(){

        console.log(this.provideName.name);//控制台输出：Hello Xiaoer

        this.provideName.change('变化函数');//控制台输出：变化函数

    },

  }

  //孙子组件GrandChild.vue

  export default {

    props:{},

    data(){

        return {}

    },

    inject: ['provideName'],

    mounted(){

        console.log(this.provideName.name);//控制台输出：Hello Xiaoer

        this.provideName.change('变化函数');//控制台输出：变化函数

    },

  }

```

8. EventBus:（第三方库）甚至任意2个组件间通信(任意组件)

```

[github地址](https://github.com/krasimir/EventBus)

//通过导出一个 Vue 实例，然后再需要的地方引入：

    // eventBus.js

    import Vue from 'vue'export

    const EventBus = new Vue()

    //使用 EventBus 订阅和发布消息：

    import {EventBus} from '../utils/eventBus.js'

    // 订阅消息（接受更新后需要做点什么的组件）

    EventBus.$on('update', val => {})

    // 发布消息（负责更新的组件）

    EventBus.$emit('update', '更新信息')

```

```

//在main.js中初始化一个全局的事件：

    // main.js

    Vue.prototype.$eventBus = new Vue()

    //index.vue

    // 订阅消息（接受更新后需要做点什么的组件）

    this.$eventBus.$on('update', val => {})

    // 发布消息（负责更新的组件）

    this.$eventBus.$emit('update', '更新信息')

```

```

//移除事件监听

    this.$eventBus.$off('update', {})

```