--- theme: vue-pro --- # 前言在Vue中，组件化开发是构建用户界面的核心思想，它允许开发者将复杂的UI拆分成可复用的小模块。父子组件间的通信是实现这种模块化开发的关键一环，它确保了组件之间的数据流动和功能协作。Vue为此提供了两种基本且强大的机制：`props`和`$emit`。在讲解父子通信props与$emit前，我们先要知道**什么是组件通信**？ **组件通信就是指组件与组件间的数据传递，但是我们都知道组件的数据是独立的，无法直接访问其他组件的数据，这时候就需要组件通信。** **** 组件之间的关系分为：1.父子关系；2非父子关系 ```mermaid graph TD 组件A --> 组件B 组件A --> 组件C ``` 如关系图，这里称为组件A与组件B和组件C的为父子关系，而组件B和组件C是非父子关系。 ```mermaid graph TD props和$emit --> 父子关系 provide&inject-->非父子通信 eventbus -->非父子通信 ``` 这里我们可以知道几种通信的方法，本文将讲述props与$emit父子通信： **1.父组件通过props将数据传递给子组件** **2.子组件通过$emit通知父组件修改更新数据** # props ## 概念： `props`是Vue提供的一个特性，允许父组件向子组件传递数据。子组件通过在组件内部声明接受的props，就可以接收来自父组件的数据。 ## 使用方法：在Vue 3中，可以在父组件的`export default {}`内使用`data()`函数内部直接返回要传递的数据，接着给子组件以添加属性的方式传值。在子组件的`export default {}`中添加props:[]接收数据，再在模板中直接使用。 **父组件** ``` ``` **子组件** ``` ``` ## props的校验做为组件的props指定验证要求，不符合要求，控制台就会有错误提示，有利于帮助开发者快速发现错误。语法： ``` props:{'delivery':{ type:Number,//校验类型 required:false,//是否必填（非空校验） default:0,//默认值 //自定义校验方法 validators(value){ return typeof value === 'number' } } } ``` # $emit ## 概念： `$emit`是Vue实例的一个方法，用于在子组件中触发自定义事件，以此向父组件传递信息或执行父组件中的回调函数。 ## 使用方法：在子组件内部，通过`this.$emit('事件名称', 数据)`来触发一个事件，并可附带数据。父组件在使用子组件时，通过`v-on`或简写的`@`来监听这个事件，并定义相应的处理函数。最后在父组件中定义事件处理函数。 **子组件** ``` ``` **父组件** ```