Vue 3中的defineEmits()和defineProps()解析

前言 

       在Vue 3中，Composition API的引入为开发者带来了更灵活、更强大的组件开发体验。其中，defineEmits()和defineProps()这两个函数在<script setup>语法中扮演着至关重要的角色，它们分别用于定义组件触发的事件和接收的属性，从而实现了组件间的有效通信。

一、defineProps()：明确接收外部数据

        在Vue中，组件间的数据传递通常通过props实现。而在Vue 3的Composition API中，defineProps()函数则用于在<script setup>中声明组件期望接收的props。

        通过defineProps()，我们可以明确指定每个prop的类型、默认值以及验证函数，从而确保组件接收到的数据符合预期。这不仅提高了代码的可读性和可维护性，还为TypeScript用户提供了类型推导功能，进一步增强了代码的健壮性。

        通俗一点讲，它是用于声明组件期望从父组件接收的 props（属性）。这些 props 是父组件在使用子组件时通过属性绑定的方式传递的数据。

        当你在子组件中使用 defineProps 来声明 props 时，你实际上是在定义组件的接口，告诉 Vue 和其他开发者这个组件需要哪些 props，以及这些 props 的类型和可能的验证规则。这样，父组件就可以按照这些声明来传递相应的数据给子组件。

示例：

//子组件
<script setup>  
import { defineProps } from 'vue'  
  
const props = defineProps({  
  title: String,  
  isVisible: Boolean  
})  
</script>

//父组件
<template>  
  <MyComponent :title="myTitle" :isVisible="shouldShow" />  
</template>  
  
<script>  
import MyComponent from './MyComponent.vue'  
  
export default {  
  components: {  
    MyComponent  
  },  
  data() {  
    return {  
      myTitle: 'Hello from Parent',  
      shouldShow: true  
    }  
  }  
}  
</script>

        在这个例子中，父组件通过属性绑定 :title="myTitle" 和 :isVisible="shouldShow" 将数据传递给子组件 MyComponent。子组件中的 defineProps 声明确保了这些 props 的存在，并且它们可以在组件的模板或 setup 函数中被正确引用和使用。

二、defineEmits()：定义组件触发的事件

        与defineProps()相对应的是defineEmits()，它用于在<script setup>中声明组件可以触发的事件。通过定义事件，组件可以主动向父组件或其他监听者发送消息，从而实现组件间的通信。

        与defineProps()类似，defineEmits()也支持类型推导和验证功能。这意味着我们可以为事件定义类型，并在触发事件时进行参数验证，以确保数据的正确性和一致性。

        通俗一点来说，有时候，子组件需要告诉父组件某件事情发生了，比如用户点击了一个按钮，或者子组件内部的数据有了变化。这时，子组件就可以“发射”或“触发”一个事件，父组件则可以监听这个事件，并做出相应的反应。

代码示例：

<script setup>  
import { defineEmits } from 'vue'  
  
const emit = defineEmits(['update'])  
  
function increment() {  
  const count = /* 获取或计算当前计数 */;  
  emit('update', count + 1);  
}  
</script>  
  
<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>

        在这个例子中，我们使用了defineEmits()来声明了一个名为update的事件。当点击按钮时，increment()函数会被调用，它触发了一个update事件并传递了一个更新后的计数作为参数。父组件可以通过监听这个事件来接收这个计数，并据此更新自己的状态或执行其他操作。

三、总结

  defineProps()和defineEmits()是Vue 3中Composition API的重要组成部分，它们分别用于定义组件接收的属性和触发的事件。通过这两个函数，我们可以实现组件间的清晰、明确的数据传递和通信，从而提高代码的可读性、可维护性和健壮性。无论是使用纯JavaScript还是TypeScript进行开发，它们都能为我们提供强大的类型推导和验证功能，帮助我们构建更加可靠和高效的Vue应用程序。