企业官网建设流程全解析

智能网站系统,专业做网站广州,深圳网页设计模板,益阳网站seoProps与Emits对比摘要核心区别#xff1a;Props实现父→子单向数据流#xff08;用于配置#xff09;#xff0c;Emits实现子→父事件通知#xff08;用于交互#xff09;。特性对比#xff1a;数据流#xff1a;Props向下传递只读数据#xff0c;Emits向上触发事件验…Props与Emits对比摘要核心区别Props实现父→子单向数据流用于配置Emits实现子→父事件通知用于交互。特性对比数据流Props向下传递只读数据Emits向上触发事件验证Props支持类型/默认值验证Emits无内置验证Vue3优化均支持TS类型推断Composition API提供defineProps/defineEmits使用场景Props初始化配置/展示数据Emits用户交互反馈/状态变更通知最佳实践遵循单向数据流原则为复杂数据添加验证使用kebab-case命名事件避免直接修改Props特殊用法v-model本质是PropsEmits的组合语法糖。Props 和 Emits 对比总结对比维度Props属性Emits事件数据流向父 → 子单向向下子 → 父单向向上作用父组件向子组件传递数据子组件向父组件通知事件使用场景配置子组件、传递初始数据用户交互反馈、状态变化通知是否可变只读子组件不应直接修改可触发多次传递不同数据响应式在子组件中是响应式的事件本身不是响应式的但可传递响应式数据Vue 2 Options API 中的用法特性PropsEmits声明方式props: [title, content]或对象形式emits: [submit, change]Vue 2.3类型验证支持完整类型验证无内置验证Vue 2 中默认值通过default属性设置不适用必需性通过required: true设置不适用代码示例props: {br title: {br type: String,br required: truebr }br}emits: [update:modelValue]Vue 3 Composition API /script setup中的用法特性PropsEmits声明方式defineProps()defineEmits()类型验证支持对象和泛型两种方式支持数组和对象两种方式TypeScript完美支持类型推断完美支持类型推断访问方式通过props.xxx访问通过emit(event, data)触发代码示例const props defineProps{br title: string,br count?: numberbr}()const emit defineEmits{br (e: submit, data: any): voidbr}()实际使用示例对比Props 示例!-- 父组件 Parent.vue -- template !-- 传递 props -- ChildComponent :titlepageTitle :countcounter / /template !-- 子组件 Child.vue -- template h1{{ title }}/h1 p计数: {{ count }}/p /template script setup // Vue 3 Composition API const props defineProps({ title: String, count: { type: Number, default: 0 } }) /scriptEmits 示例vue!-- 子组件 Child.vue -- template button clickhandleClick提交/button /template script setup // Vue 3 Composition API const emit defineEmits([submit, update:value]) const handleClick () { // 触发事件并传递数据 emit(submit, { id: 1, data: test }) emit(update:value, new value) } /script !-- 父组件 Parent.vue -- template !-- 监听事件 -- ChildComponent submithandleSubmit update:valuevalue $event / /template特殊用法双向绑定模式实现方式说明v-modelprops: modelValueemits: update:modelValueVue 3 默认方式v-model:propNameprops: propNameemits: update:propNameVue 3 参数化 v-model.sync 修饰符props: xxxemits: update:xxxVue 2 方式Vue 3 已废弃双向绑定示例vue!-- 子组件 CustomInput.vue -- script setup const props defineProps([modelValue]) const emit defineEmits([update:modelValue]) const updateValue (event) { emit(update:modelValue, event.target.value) } /script template input :valuemodelValue inputupdateValue / /template !-- 父组件使用 -- template !-- Vue 3 默认 v-model -- CustomInput v-modelusername / !-- Vue 3 参数化 v-model -- CustomInput v-model:firstNamefirst v-model:lastNamelast / /template最佳实践对比最佳实践PropsEmits命名规范使用 camelCase 声明kebab-case 传递使用 kebab-case 命名事件数据验证始终添加类型验证和默认值为复杂数据添加验证函数单向数据流不要直接修改 props使用 emits 通知父组件修改传递最小必要数据避免传递整个对象TypeScript使用泛型语法获得更好的类型安全为事件定义完整类型签名文档注释为每个 prop 添加 JSDoc 注释说明用途为每个事件添加注释说明触发时机常见错误对比错误类型Props 相关错误Emits 相关错误语法错误使用 v-bind 传递动态值:propvalue监听事件使用 或 v-oneventhandler逻辑错误在子组件中修改 props违反单向数据流在父组件中直接修改子组件数据应通过事件性能问题传递大型对象导致不必要的重新渲染频繁触发高开销的事件处理函数类型错误传递错误类型的数据类型验证可捕获事件参数类型与处理函数期望类型不匹配选择指南场景应该使用 Props应该使用 Emits配置子组件✅ 传递初始配置、样式参数❌用户交互反馈❌✅ 按钮点击、表单提交数据展示✅ 传递要显示的数据❌状态变化通知❌✅ 数据更新、组件状态变化表单输入✅ 接收初始值✅ 输入变化时通知父组件核心原则Props 向下Events 向上。父组件通过 Props 控制子组件的显示子组件通过 Emits 通知父组件用户交互。