Vue2中的父子通信

父子通信流程图：

• 父组件通过props将数据传递给子组件
• 子组件利用$emit通知父组件修改更新
  

父组件传递子组件

注意点

但是需要注意的是，通过props传递的数据是只读状态的，也就是说，我们不能去修改这个值。
注意：props是只读的，如果直接对props中的数据进行修改，Vue就会发出警告。如果需要对props进行修改，就把props中的内容复制一份到data中，然后修改data中的数据。

子组件传递父组件

子组件利用$emit通知父组件，进行修改更新

效果如下：

说白了就是子组件通过$emit去定义一个监听事件，并且携带需要修改的数据传递到父组件中，父组件触发了这个事件，随之做相应的操作。

什么是prop

• Prop定义：组件上注册的一些自定义属性
• Prop作用：向子组件传递数据

特点：

• 可以传递任意数量的prop
• 可以传递任意类型的prop

由于prop的特性，使得prop也具有了一定的危险性，在组件的通信过程中，如果传递的数据并不是某个子组件具体需要的值，那么就会导致子组件的某些突发情况，正因为如此，此时可以通过 props校验 去完成。

props校验

作用：为组件的prop指定验证要求，不符合要求，可以在控制台错误提示

语法：

• 类型校验
• 非空校验
• 默认值
• 自定义校验

 props:{
    username:{
      type:String, // 类型校验
      default:'张三', // 默认值
      require:true, // 非空校验
      // 自定义校验
      validator(value){
        if(value.length<=0 || value.length>=10){
          // 不放行
          return false
        }else{
          // 放行
          return true;
        }
      }
    },
    age:{},
    isSingle:{},
    car:{},
    hobby:{}
  }

prop 和 data 的区别

共同点：都可以给组件提供数据。
区别：

• data的数据是自己的，可以修改
• prop的数据是外部的，不能直接修改，要遵循单向数据流

其实对于子组件修改属性有两种方式：
个人认为

• 第一是 父组件通过:xxx="xxx"的方式传递给子组件，子组件通过this.$emit去通知父组件，虽然父组件通过监听去实现数据的修改
• 第二是 子组件通过自身的data去拷贝一份父组件传递过来的prop属性

总而言之，谁的数据，谁负责去修改

非父子通信

• 通过provide & inject 或 eventbus

eventbus

作用：非父子组件，进行简易消息传递。复杂场景还是使用vuex
步骤：

• 1.创建一个都能访问到的事件总线（空Vue 实例）-> utils/EventBus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

• 2.A组件（接收方） ，监听Bus实例的事件

created(){
    <!--相当于这个 bus组件 监听了 sendMsg 这个事件 -->
    Bus.$on('sendMsg',(msg)=>{
     this.msg = msg
    })
}

• 3.B组件（发送方），触发Bus实例的事件

Bus.$emit('sendMsg',"xxxxx消息")

那么，接收方A ，就会收到这个消息了

图解形式：

provide & inject

作用： 跨层级共享数据

步骤：

• 1.父组件 provide 提供数据

export default{
    provide(){
        return{
            //普通消息【非响应式】
            color:this.color,
            // 复杂消息【响应式】
            userInfo:this.userInfo,
        }
    }
}

• 2.子/孙组件 inject取值使用

export default{
   inject:['color','userInfo']
   created():{
       console.log(this.color,this.userInfo)
   }
}

.sync 修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为value
场景：封装弹窗类的基础组件，visible属性，true显示 false隐藏

父组件使用：

<BaseDialog :visible.sync = 'isSshow'/>
// 等价 采用上面的即可
<BaseDialog
    :visible='isShow'
    @update:visible='isShow = $event'/>

子组件使用：

props:{visible:Boolean}

xxx(){this.$emit('update:visible',false)}

代码：

通用方案

• vuex