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

• 组件的数据是独立的，无法直接访问其他组件的数据。

• 想用其他组件的数据 → 组件通信

组件关系

1、父子关系

2、非父子关系

父子通信流程：

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

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

---

父 → 子

父组件传给子组件 需要在子组件内部使用props：接收

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title']
}
</script>

---

子 → 父

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

<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle','传智教育')
    },
  },
}
</script>

prop

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

作用：向子组件传递数据

<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>

• 可以传递任意数量的prop

• 可以传递任意类型的prop

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

语法：
① 类型校验
② 非空校验
③ 默认值
④ 自定义校验 validator

<script>
export default {
  props: {
    w: Number,
  },
}
</script>
// 检测w 是否为Number类型

---

prop & data、单向数据流

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

区别：

• data 的数据是自己的→ 随便改

• prop 的数据是外部的→ 不能直接改，要遵循 单向数据流

单向数据流：父级prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。