vue2 八大组件通信，父子通信，跨层级通信，事件总线，vuex等

什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据
• 想使用其他组件的数据，就需要组件通信

父子通信流程

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

props

Props 定义

组件上 注册的一些 自定义属性

Props 作用

1. 向子组件传递数据

2. props接受的数据，只读，不可修改

3. props接收到的简单数据类型，不可修改

4. props接收到的复杂数据类型，可修改，vue也不会报错，但是不建议这样做

特点

1. 可以 传递 任意数量 的prop
2. 可以 传递 任意类型 的prop

数组写法

数组写法没有校验，所以不会在控制台报错

props: ['title','text', 'name']

对象写法（props校验）

作用：

• 为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示
• 帮助开发者，快速发现错误

简写只验证数据类型：

props: {
   
   
    校验的属性名: 数据类型
}

完整写法，完整的验证：

props: {
   
   
  校验的属性名: {
   
   
    type: 数据类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值（未传值就使用默认值）
    validator (value) {
   
     // value接收的就是传过来的值
      // 自定义校验逻辑
      return 布尔值   // 返回true就代表通过验证
    }
  }
}

示例：

<script>
export default {
     
     
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
     
     
    w: {
     
     
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
     
     
        // console.log(val)
        if (val >= 100 || val <= 0) {
     
     
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
     
     
          return true
        }
      },
    },
  },
}
</script>

props父向子传值

用props父传子

1. 给子组件以添加属性的方式传值
2. 子组件内部通过props接收
3. 模板中直接使用 props接收的值

在子组件中修改props

1. 如果传过来的是简单数据类型，那么是无法修改的
2. 如果传过来的是复杂数据类型，那么是可以修改的，但是不建议去修改
3. 子组件如果要修改父组件传过来的数据的话，可以用$emit去触发父组件的自定义事件，让父组件自己去修改数据

$emit子向父传值

用props子传父

1. 父通过自定义属性将自己的方法传送出去
2. 子通过props接受父传过来的方法
3. 子通过调用接收过来的方法去传参的形式传数据
4. 因为方法是在父亲身上，父亲因此接收到了数据

用$emit子传父

1. 给子组件绑定自定义事件，事件触发时调用来自父亲的回调函数
2. vm.$emit( eventName, […args] )，eventName为字符串类型，[…args]可省略，或者传入多条数据
3. 在子组件内利用$emit触发子组件绑定的自定义事件，传入数据，进行修改更新

上图流程：

1. 点击button，调用回调函数changeTitle
2. 回调函数调用$emit方法
3. $emit方法会去触发子组件绑定的自定义事件changeTitle，同时传入参数
4. 子组件绑定的自定义事件changeTitle被触发后会调用回调函数handleChange
5. 回调函数handleChange用接收到的参数去修改数据msg

事件总线

事件总线前置知识

$on