后端与前端须知：Vue3 defineProps、defineEmits、defineExpose剖析

Vue3 的<script setup>模式

在 Vue 2 中，我们使用 <template>, <script>和<style> 标签来定义组件。然而，在 Vue 3 中，<script setup> 提供了一种新的方式来组织和编写组件的逻辑。它允许我们将模板和脚本逻辑放在一个 <script> 标签中，并在其中使用 JavaScript 函数来定义组件的属性、事件和方法。

<script setup> 模式为我们带来了以下好处：

• 简化了组件的代码结构
• 提高了组件的开发效率
• 增强了代码的可读性和可维护性

<script setup>模式中的三个方法

在 <script setup> 模式下，我们有三个非常重要的 API：defineProps(), defineEmits() 和 defineExpose(). 它们的作用如下：

• defineProps(): 定义组件的响应式属性，并为这些属性指定类型和默认值。
• defineEmits(): 定义组件可以触发的事件，并为这些事件指定参数类型。
• defineExpose(): 定义组件可以公开给父组件和子组件的属性和方法。

这三个方法让我们能够在 <script setup> 中直接定义组件的属性、事件和方法，而无需使用 this 来访问组件实例。

defineProps()

defineProps() 方法用于定义组件的响应式属性。它接受一个对象作为参数，该对象中的每个属性都代表一个组件的响应式属性。例如：

<script setup>
const props = defineProps({
  message: {
    type: String,
    default: 'Hello World'
  },
  count: {
    type: Number,
    required: true
  }
});
</script>

在这个例子中，我们定义了两个响应式属性：message 和 count。message 的类型为字符串，默认值为 "Hello World"。count 的类型为数字，且为必填项。

defineEmits()

defineEmits() 方法用于定义组件可以触发的事件。它接受一个对象作为参数，该对象中的每个属性都代表一个组件可以触发的事件。例如：

<script setup>
const emits = defineEmits(['increment', 'decrement']);
</script>

在这个例子中，我们定义了两个事件：increment 和 decrement。当组件内部发生相应的操作时，我们可以通过 emit() 方法来触发这些事件。

defineExpose()

defineExpose() 方法用于定义组件可以公开给父组件和子组件的属性和方法。它接受一个对象作为参数，该对象中的每个属性都代表一个组件公开的属性或方法。例如：

<script setup>
const expose = defineExpose({
  name: 'John Doe',
  age: 30
});
</script>

在这个例子中，我们定义了两个公开的属性：name 和 age。父组件和子组件可以通过 $attrs 和 $slots 来访问这些属性。

结论

defineProps(), defineEmits() 和 defineExpose() 这三个方法是 Vue3 中非常重要的 API，它们让我们能够在 <script setup> 模式下更轻松地定义组件的属性、事件和方法。这有助于我们构建更强大和可维护的 Vue 应用程序。