组件之间的通信

简单提要

组件通信主要方式有四种：
1.通过prop进行组件之间的单向通讯（父子组件之间的单向通讯）=>特点：

父组件值改变，子组件相应改变.但子组件改变不影响父组件

正常父子组件（单向）通讯: 父组件值改变，子组件相应改变.但子组件改变不影响父组件

父组件

2.通过组件的自定义事件进行组件之间的单向通讯（子父组件之间的单向通讯）=>特点

子组件值改变，父组件相应改变.但父组件改变不影响子组件

子父组件单向通讯: 子组件通过触发父组件事件改变父组件的值

    父组件
    
    

    
    

3.通过组件的自定义事件进行组件之间的（双向）通讯=>特点

（利用prop特性）子组件通过触发父组件事件改变其自身的值从而改变子组件的值

正常子父组件（双向）通讯（不使用.sync修饰符）: （利用prop特性）子组件通过触发父组件事件改变其自身的值从而改变子组件的值

    父组件
    
    

    

关于该类方法实现的组件之间的双向通信，官方提供了一种 .sync 修饰符来简化实现

正常子父组件（双向）通讯（使用.sync修饰符）: （利用prop特性）子组件通过触发父组件事件改变其自身的值从而改变子组件的值
使用使用.sync修饰符的好处是：省略在父组件上给子组件添加监听方法，且也省略了实现该方法的主体。在子组件中直接使用 this.$emit('update:value', this.value)  value为子组件中的props的key  来触发父组件值得改变同时响应子组件的值一起改变（说白了就是遵循prop单向数据流规则）

    父组件
    
    

    
    

使用使用.sync修饰符的好处是：省略在父组件上给子组件添加监听方法，且也省略了实现该方法的主体。在子组件中直接使用 this.$emit('update:value', this.value) value为子组件中的props的key 来触发父组件值得改变同时响应子组件的值一起改变

4.通过vue事件总线进行组件之间的（双向或单向）通讯=>特点

vue事件总线

    父组件
    
    

    

当然这四种是比较常用的 实现组件通信还可以使用：
处理边界情况

• 通过$parent属性访问父组件
• 通过children属性访问子组件
• 给组件命名，通过指定名称来访问

this.$refs.usernameInput

• 等等 ····