Vue响应式数据传递的关键在于保持响应链不断：父组件须用ref或reactive定义数据，子组件不得解构props，修改需建本地副本并通过emit通知，深层传递推荐provide/inject。

Vue 响应式数据在组件间传递，关键不是“怎么传”，而是“怎么保响应”。只要源头是响应式的、传递路径没断链、接收方式正确，更新就会自动同步。

父组件必须用 ref 或 reactive 包裹数据

普通变量（如 let msg = "hello"）传给子组件，改了也不会触发更新。必须显式创建响应式引用：

• 基本类型（字符串、数字、布尔）用 ref()：const title = ref("首页")，然后 <Child :title="title" />
• 对象或数组用 reactive()：const user = reactive({ name: "Tom", age: 30 })，再 <Child :user="user" />
• 避免静态绑定：:title="'首页'" 是字面量，无响应性；:title="title"（title 是 ref）才可响应

子组件别解构 props，直接访问

defineProps 返回的是只读但响应式的代理对象。解构会丢失响应性：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• ❌ 错误写法：const { title } = props → title 变成普通值，父组件改了它不更新
• ✅ 正确写法：{{ props.title }} 或 props.title.value（ref 类型）
• 模板中可直接写 {{ title }}，Vue 会自动解包 ref，无需 .value

想在子组件改数据？别动 props，建本地副本

props 是只读的，直接赋值会报错，也违反单向数据流。需要修改时，复制一份本地状态：

立即学习“前端免费学习笔记（深入）”；

• 基础类型：const localTitle = ref(props.title)
• 对象类型：const localUser = reactive({ ...toRaw(props.user) })，或用 toRefs() 拆解后逐个 ref
• 改完后通过 emit 通知父组件更新，例如 emit('update:title', localTitle.value)

深层嵌套或跨多层？优先用 provide/inject

当组件层级深（如 App → Layout → Sidebar → MenuItem），逐层传 props 易出错且冗余。provide/inject 更简洁：

• 基本类型用 ref + provide：provide('count', count)，inject('count') 直接拿到响应式 ref
• 复杂对象用 reactive + provide：provide('config', config)，inject 后仍保持响应性
• 注意：inject 返回值默认非响应式，需配合 ref 或 reactive 使用，否则修改不触发更新