vue组件间通信

1.什么是组件通信

（1）组件的数据是独立的，无法直接访问其他组件的数据。
（2）组件通信, 就是指 组件与组件 之间的数据传递

1.1 组件关系分类：

（1）父子关系
（2）非父子关系

2.组件通信解决方案

2.2 vue2

2.2.1 父子通信

（1）父组件通过 props 将数据传递给子组件

（2）子组件利用 $emit 通知父组件修改更新

2.2.2 prop详解

2.2.2.1 什么是 prop

（1）Prop 定义：组件上 注册的一些 自定义属性
（2）Prop 作用：向子组件传递数据
（3）特点：
⚫ 可以 传递 任意数量 的prop
⚫ 可以 传递 任意类型 的prop

2.2.2.2 props 校验

（1）避免组件的 prop 乱传，可以为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
（2）语法：
① 类型校验
② 非空校验
③ 默认值
④ 自定义校验
（3）示例：

（3）prop和data的异同点
①共同点：都可以给组件提供数据。
②区别：
⚫ data 的数据是自己的 → 随便改
⚫ prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
③单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

2.3 vue3

2.3.1 defineProps(父传子、子传父)

defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

2.3.1.1 父传子(属性值是非函数)

（1）父组件中给子组件绑定属性
（2）子组件内部通过defineProps选项接收

2.3.1.2 子传父(属性值是函数)

2.3.2 自定义事件 defineEmits(子传父)