在 Vue 3 中，setup 函数是 Composition API 的入口点，用于替代传统的 data、methods、computed 等选项。setup 函数可以接收两个参数：props 和 context。下面详细解释这两个参数及其用途。
setup 函数签名
import { SetupContext } from 'vue';
export default {
props: {
// 定义组件的 props
},
setup(props: {}, context: SetupContext) {
// 在这里使用 props 和 context
}
};
参数详解
1. props
props 是一个对象，包含了传递给组件的所有属性（props）。这些属性可以在 setup 函数中直接使用，并且它们是响应式的（reactive）。
-
类型：根据你在组件中定义的
props类型来确定。 -
示例：
export default { props: { message: String, count: Number }, setup(props) { console.log(props.message); // 输出传递给组件的 message prop console.log(props.count); // 输出传递给组件的 count prop } }; -
注意事项：
props是只读的，不能直接修改。- 如果需要对
props进行转换或派生新的值，可以使用computed或者其他响应式机制。
2. context
context 是一个包含组件上下文信息的对象。它提供了几个有用的属性和方法，帮助你更好地管理组件的行为。
-
类型：
SetupContext -
属性：
attrs：包含所有未声明为props的属性（即$attrs），通常用于非props的 DOM 属性。slots：包含插槽内容，类似于this.$slots。emit：一个函数，用于触发自定义事件，类似于this.$emit。
-
示例：
export default { props: { title: String }, setup(props, context) { // 访问 attrs console.log(context.attrs.class); // 输出传递给组件但未声明为 props 的 class 属性 // 访问 slots const defaultSlot = context.slots.default ? context.slots.default() : null; console.log(defaultSlot); // 输出默认插槽的内容 // 触发自定义事件 context.emit('customEvent', 'some data'); } };
完整示例
以下是一个完整的示例，展示了如何在 setup 函数中使用 props 和 context：
<template>
<div>
<p>{{ message }}</p>
<button @click="handleClick">Click Me</button>
<slot></slot>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
message: {
type: String,
required: true
}
},
setup(props, context) {
// 使用 props
console.log('Message:', props.message);
// 使用 context
console.log('Attrs:', context.attrs);
console.log('Slots:', context.slots.default ? context.slots.default() : null);
// 创建一个响应式变量
const count = ref(0);
// 定义一个事件处理函数
const handleClick = () => {
count.value++;
context.emit('increment', count.value);
};
return {
handleClick,
count
};
}
});
</script>
总结
props：包含传递给组件的所有属性，是响应式的并且只读。context：包含组件的上下文信息，包括attrs、slots和emit方法。
通过理解并合理使用 setup 函数的这两个参数，你可以更灵活地管理组件的状态、属性和事件，从而编写出更加模块化和可维护的代码。