Vue深入组件：Props 详解3

单向数据流

Vue 中所有 props 都遵循单向数据流原则：props 的值由父组件决定，当父组件更新时，子组件的 props 会自动更新为最新值；但子组件不能直接修改 props，否则会导致数据流混乱（难以追踪状态变化的来源）。

若子组件尝试修改 props，Vue 会在控制台抛出警告：

 const props = defineProps(['foo'])// ❌ 错误：props 是只读的！props.foo = 'bar' // 控制台会警告："Avoid mutating a prop directly..."

需修改 props 的两种场景及解决方案

实际开发中，子组件可能需要“基于 props 做修改”，此时需根据场景选择正确的方式，而非直接修改 props。

1. 场景一：prop 作为初始值，子组件后续独立维护

若 prop 仅用于传入初始值，子组件后续需要修改并维护自己的状态，可在子组件中定义一个局部数据属性，将 props 的值作为初始值赋值给它。

 const props = defineProps(['initialCounter'])// 定义局部状态 counter，以 props.initialCounter 为初始值// 后续修改 counter 不会影响 propsconst counter =