Posts

Vue 3组件事件实现子父通信，遵循单向数据流。子组件通过$emit（需defineEmits声明）触发事件并传参，父组件用@监听并处理。支持任意类型参数，可通过defineEmits对象写验证函数确保参数有效。

Vue 3 Props用于父向子组件通信，遵循单向数据流，不能直接修改。基础声明有数组、对象（含类型验证）及TypeScript方式。常见问题：类型不匹配（需检查类型、v-bind静态值）、传递失效（命名规范、动态值处理）、修改违规（用本地ref/computed或父组件方法）、验证失效（确保返回布尔值）。

Vue Props支持数组、对象（带校验）、TypeScript类型注解声明，传递需注意命名规范（camelCase/kebab-case）。单向数据流下子组件不可直接修改Props，需赋值本地变量或用computed转换。性能优化可避免不必要传递、用memo缓存或shallowRef处理大对象。

Vue 3中Props是父组件向子组件传递数据的核心机制，支持数组（简单场景）和对象语法（复杂验证，如类型、默认值、必填）声明。3.5+版本直接解构Props保持响应式。实战中父向子传数据（如BlogPost案例），需遵循单向数据流，子组件不可直接修改Props，可通过本地数据、计算属性或事件处理。常见报错如类型不匹配、直接修改Props等，需按规范处理。

Vue路由组件Props用于解耦路由与组件，通过三种模式传参：Boolean模式将路由参数转为Props，Object模式传递静态数据，Function模式可处理参数、组合数据，支持命名视图和RouterView传递，提升组件复用性与可测试性。

Vue3中，直接解构Props会导致响应式丢失，可用toRefs/toRef或保留props对象解决。复杂类型（对象/数组）Props默认值需用工厂函数。Props需显式声明，透传属性（如class、@click）自动应用到根元素，可通过inheritAttrs控制继承。