前言

在Vue中，组件化开发是构建用户界面的核心思想，它允许开发者将复杂的UI拆分成可复用的小模块。父子组件间的通信是实现这种模块化开发的关键一环，它确保了组件之间的数据流动和功能协作。Vue为此提供了两种基本且强大的机制：props和$emit。

在讲解父子通信props与$emit前，我们先要知道什么是组件通信？

组件通信就是指组件与组件间的数据传递，但是我们都知道组件的数据是独立的，无法直接访问其他组件的数据，这时候就需要组件通信。

---

组件之间的关系分为：1.父子关系；2非父子关系

如关系图，这里称为组件A与组件B和组件C的为父子关系，而组件B和组件C是非父子关系。

这里我们可以知道几种通信的方法，本文将讲述props与$emit父子通信：

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

2.子组件通过$emit通知父组件修改更新数据

props

概念：

props是Vue提供的一个特性，允许父组件向子组件传递数据。子组件通过在组件内部声明接受的props，就可以接收来自父组件的数据。

使用方法：

在Vue 3中，可以在父组件的export default {}内使用data()函数内部直接返回要传递的数据，接着给子组件以添加属性的方式传值。在子组件的export default {}中添加props:[]接收数据，再在模板中直接使用。

父组件

<template>
  <div class="father">
    我是father
  <son 
  :delivery="num"></son>
</div>

</template>

<script>
import son from'./son.vue';
export default {
  components:{
    son:son
  },
  data(){
    return {
      num:666
    }
  },
}
</script >

子组件

<template>
  <div class="son">
    我是son:{{ delivery }}
  </div>
</template>

<script>
export default {
  props:['delivery'],
</script>

props的校验

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

语法：

  props:{'delivery':{
    type:Number,//校验类型
    required:false,//是否必填（非空校验）
    default:0,//默认值
    //自定义校验方法
    validators(value){
      return typeof value === 'number'
    }
  }
 }

$emit

概念：

$emit是Vue实例的一个方法，用于在子组件中触发自定义事件，以此向父组件传递信息或执行父组件中的回调函数。

使用方法：

在子组件内部，通过this.$emit('事件名称', 数据)来触发一个事件，并可附带数据。父组件在使用子组件时，通过v-on或简写的@来监听这个事件，并定义相应的处理函数。最后在父组件中定义事件处理函数。 子组件

<template>
  <div class="son">
    <button @click="handleSub()">-</button>
    我是son:{{ delivery }}
    <button @click="handleAdd()">+</button>

  </div>
</template>

<script>
export default {
  // props:['delivery'],
  props:{'delivery':{
    type:Number,//类型
    required:false,//是否必填
    default:0,//默认值
    //自定义校验方法
    validators(value){
      return typeof value === 'number'
    }
  }
  },

methods:{
  handleSub(){
    console.log('--')
    //子传父 this.$emit(事件名，参数）
    this.$emit('changeNum',this.delivery-1)
  },
  handleAdd(){
    console.log('++')
    this.$emit('changeNum',this.delivery+1)
  }
}
}
</script>

父组件

<template>
  <div class="father">
    我是father
  <son 
  @changeNum="handleNum"
  :delivery="num"></son>
</div>

</template>

<script>
import son from'./son.vue';
export default {
  components:{
    son:son
  },
  data(){
    return {
      num:666
    }
  },
  methods:{
      handleNum(newNum){
        this.num = newNum;
      }
  }

效果图

总结

这便是通过props和$emit的基础使用方法，而在实际开发中对于props和$emit有着较高的要求，因此我们需要熟悉并掌握。同时Vue提供了一套简洁高效的父子组件通信机制，它不仅支持数据的单向流动，还保证了组件间交互的灵活性和高效性。理解并熟练运用这两种机制，对于构建可维护、高度复用的Vue应用至关重要。随着Vue版本的演进，虽然新的API和模式（如Composition API中的emits选项）被引入，但props与$emit的基本理念和作用依然不变，是我们每位Vue开发者必须掌握的基础知识。

强化练习案例：

• 表单组件：父组件传递配置信息（如label、placeholder等）给子组件（如输入框），子组件通过$emit告诉父组件用户输入的内容变化。
• 列表与详情：父组件传递列表数据给子组件（如商品列表），子组件点击某项后$emit事件携带该项目的id或详细信息，父组件接收到后展示详情页或执行其他操作。
• 通知与反馈：子组件完成某个任务（如加载完毕、错误发生）后，通过$emit发送事件给父组件，父组件根据这些事件做相应处理，如显示提示信息。