Vue 3 组合式函数不能直接接收 props，必须显式将 props 作为参数传入；传入 ref 可保持响应性，普通值需配合 computed 或 watch；禁止在组合式函数内调用 defineProps 或依赖全局上下文。
在 Vue 3 组合式函数（Composable）中，不能直接接收 props，因为组合式函数本身不是组件，它没有生命周期、上下文，也不参与模板渲染。props 是组件级的概念，只存在于组件的 `<script setup>` 或 `setup()` 函数中。</script>
组合式函数如何间接使用 props
实际开发中，你需要把 props 作为参数显式传入组合式函数——这是最清晰、最推荐的做法。组合式函数不自动感知父组件或调用它的组件的 props，必须“手动带进去”。
- 父组件或子组件在 `<script setup>` 中解构或读取 props</script>
- 将需要的 prop 值（如字符串、数字、ref、reactive 对象等）作为参数传给组合式函数
- 组合式函数内部可基于这些值做逻辑处理、创建计算属性、监听变化等
正确示例：把 props 当参数传入
比如有一个用于格式化标题的组合式函数 useTitleFormatter：
// composables/useTitleFormatter.js
import { computed } from 'vue'
<p>export function useTitleFormatter(title, prefix = '【系统】') {
return computed(() => <code>${prefix} ${title || '未命名'}</code>)
}
在子组件中这样使用：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
<!-- ChildComponent.vue -->
<script setup>
import { defineProps } from 'vue'
import { useTitleFormatter } from '@/composables/useTitleFormatter'
<p>const props = defineProps({
title: { type: String, default: '' }
})</p><p>// ✅ 正确：把 props.title 显式传进去
const formattedTitle = useTitleFormatter(props.title, '【文档】')
</script></p><p><template>
<h1>{{ formattedTitle }}</h1>
</template>
注意 props 的响应性传递
如果传入的是 ref 或 reactive 对象，组合式函数内部可直接响应式地使用；如果是普通值（如字符串、数字），需确保在函数内用 computed 或 watch 关联其变化：
- 传 ref：函数内可直接解包或用
.value，但更推荐保持响应式链路（如用computed） - 传普通值：无法自动响应更新，必须配合
watch或由调用方重新传入新值 - 避免在组合式函数里直接修改 props（props 是只读的），如有状态需要变更，应在组件内定义 ref 并传入
不推荐的误区
以下做法不可行或易出错：
- 试图在组合式函数里调用
defineProps—— 会报错，该 API 只能在 `<script setup>` 顶层使用</script> - 依赖全局上下文或尝试从
getCurrentInstance拿 props —— 不稳定、破坏组合式函数的可复用性和测试性 - 把整个
props对象一股脑传入，却不明确声明依赖项 —— 导致难以维护和类型推导失效
