props是响应式的只读对象，需通过defineProps声明，可使用toRefs保持解构后的响应性。
context包含三个非响应式属性：attrs（未声明的属性）、slots（插槽内容）和emit（触发事件）。
在<script setup>中推荐使用useAttrs()、useSlots()和defineEmits()。
注意事项包括setup执行时机、响应式丢失风险及TypeScript支持。
最佳实践建议优先使用<script setup>语法糖，配合类型声明和emit事件通信，充分利用Vue3响应式系统。
在 Vue3 的 Composition API 中，setup函数接收两个重要参数：props和context。
1.props 参数
props是响应式的对象，包含组件接收的所有 prop。
特性：
响应式：当父组件传递的 prop 变化时，
props会自动更新只读：不能在子组件中直接修改（会触发警告）
需要显式声明：必须通过
defineProps或props选项声明
基本使用：
vue
<script setup> import { toRefs, watch } from 'vue' // 声明 props const props = defineProps({ title: String, count: { type: Number, default: 0 } }) // 直接使用 console.log(props.title) // 监听 props 变化 watch(() => props.count, (newVal) => { console.log('count changed:', newVal) }) // 解构 props（会失去响应性） const { title } = props // ❌ 非响应式 // 保持响应性的解构 const { title, count } = toRefs(props) // ✅ 响应式 </script>2.context 参数
context是一个普通对象（非响应式），包含三个组件属性。
context 包含三个属性：
a)attrs
vue
<script setup> import { useAttrs } from 'vue' // 方式一：通过 setup 参数 setup(props, context) { console.log(context.attrs) // 所有未在 props 中声明的 attribute } // 方式二：在 <script setup> 中使用 useAttrs() const attrs = useAttrs() console.log(attrs.class) // 获取 class 属性 console.log(attrs.onClick) // 获取事件监听器 </script>包含所有未在 props 中声明的 attribute
包括
class、style、事件监听器等非响应式，但会自动更新
b)slots
vue
<script setup> import { useSlots } from 'vue' // 方式一：通过 setup 参数 setup(props, context) { // 检查插槽是否存在 if (context.slots.default) { // 渲染插槽内容 return () => context.slots.default() } } // 方式二：在 <script setup> 中使用 useSlots() const slots = useSlots() console.log(slots.default) // 默认插槽 console.log(slots.header) // 具名插槽 </script>包含所有插槽内容的函数
用于渲染插槽内容或检查插槽是否存在
c)emit
vue
<script setup> import { defineEmits } from 'vue' // 方式一：通过 setup 参数 setup(props, context) { const handleClick = () => { context.emit('update', newValue) } } // 方式二：在 <script setup> 中使用 defineEmits() const emit = defineEmits(['update', 'delete']) const handleClick = () => { emit('update', { id: 1, value: 'new' }) emit('delete', 1) } </script>用于触发自定义事件
推荐使用
defineEmits进行声明
3.完整示例
选项式 API 写法：
vue
<script> import { toRefs, watch } from 'vue' export default { props: ['title', 'count'], emits: ['update-count'], setup(props, context) { // 使用 props const { title, count } = toRefs(props) // 使用 attrs console.log('所有 attributes:', context.attrs) // 使用 slots const hasHeaderSlot = !!context.slots.header // 使用 emit const increment = () => { context.emit('update-count', count.value + 1) } // 监听 props 变化 watch(count, (newVal) => { console.log('Count updated:', newVal) }) return { title, count, increment, hasHeaderSlot } } } </script><script setup>语法糖写法：
vue
<script setup> import { toRefs, watch, useAttrs, useSlots } from 'vue' // 声明 props const props = defineProps({ title: String, count: Number }) // 声明 emits const emit = defineEmits(['update-count']) // 使用 attrs 和 slots const attrs = useAttrs() const slots = useSlots() // 响应式解构 props const { title, count } = toRefs(props) // 检查插槽 const hasHeaderSlot = !!slots.header // 方法 const increment = () => { emit('update-count', count.value + 1) } // 监听器 watch(count, (newVal) => { console.log('Count updated:', newVal) }) </script> <template> <div :class="attrs.class"> <slot name="header" v-if="hasHeaderSlot" /> <h2>{{ title }}</h2> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <slot /> </div> </template>4.注意事项
setup 执行时机：在
beforeCreate之前执行，此时无法访问this响应式丢失：直接解构 props 会丢失响应性，使用
toRefs或toRefattrs 非响应式：但会自动更新，无需担心
TypeScript 支持：
vue
<script setup lang="ts"> interface Props { title: string count?: number } const props = defineProps<Props>() const emit = defineEmits<{ (e: 'update', value: number): void }>() </script>5.最佳实践
优先使用
<script setup>语法糖使用
defineProps和defineEmits进行声明需要响应式解构时使用
toRefs避免直接修改 props，使用 emit 触发事件
使用 TypeScript 增强类型安全
通过合理使用这两个参数，可以更好地组织组件逻辑，并充分利用 Vue3 的响应式系统。
