企业官网建设流程全解析

天水做网站电话,网站建设选哪家好,上海有哪些科技公司,建设网站编程语言本文将拆解Vue3的7种通信方式#xff0c;结合电商、后台管理等真实场景#xff0c;教你“父子用Props#xff0c;跨层用provide#xff0c;全局用Pinia”的黄金法则。一、父子组件通信#xff1a;Props/Emit/v-model1. Props#xff1a;父传子的“单向快递”核心场景结合电商、后台管理等真实场景教你“父子用Props跨层用provide全局用Pinia”的黄金法则。一、父子组件通信Props/Emit/v-model1. Props父传子的“单向快递”核心场景商品详情页父组件向商品卡片子组件传递商品数据vue!-- 父组件 ProductPage.vue -- template ProductCard :productcurrentProduct / /template script setup import { ref } from vue; const currentProduct ref({ id: 1, name: Vue3实战书, price: 89 }); /script !-- 子组件 ProductCard.vue -- template div classcard{{ product.name }} - ¥{{ product.price }}/div /template script setup const props defineProps({ product: { type: Object, required: true, // 复杂类型默认值需用函数返回避免引用类型共享 default: () ({ name: 默认商品, price: 0 }) } }); /script性能注意Props传递大对象时子组件应避免解构赋值如const { name } props直接使用props.product.name可减少响应式依赖追踪开销。2. Emit子传父的“事件回调”核心场景购物车组件子向结算页父传递“添加商品”事件vue!-- 子组件 CartItem.vue -- template button clickhandleAdd加入购物车/button /template script setup const emits defineEmits([add-to-cart]); // 显式声明事件 const handleAdd () { emits(add-to-cart, { id: 1, quantity: 1 }); // 传递数据 }; /script !-- 父组件 CheckoutPage.vue -- template CartItem add-to-cartonAddItem / /template script setup const onAddItem (item) { console.log( 收到子组件事件:, item); // { id: 1, quantity: 1 } }; /script避坑点不要用Props传递回调函数如Child :onAddhandleAdd /违反单向数据流原则且难以追踪事件来源。3. v-model双向绑定的“语法糖”核心场景搜索框组件子与父组件共享搜索关键词vue!-- 子组件 SearchInput.vue -- template input :valuemodelValue input$emit(update:modelValue, $event.target.value) / /template script setup defineProps([modelValue]); // 接收父组件v-model值 defineEmits([update:modelValue]); // 触发更新事件 /script !-- 父组件 SearchPage.vue -- template SearchInput v-modelsearchKey / !-- 等价于 SearchInput :modelValuesearchKey update:modelValuesearchKey $event / -- /template script setup import { ref } from vue; const searchKey ref(Vue组件通信); /script二、跨层级通信provide/inject场景主题切换祖先组件提供主题所有后代组件使用vue!-- 祖先组件 App.vue -- script setup import { provide, ref } from vue; const darkMode ref(false); // 提供响应式数据用ref包装后代组件可直接修改 provide(theme, { darkMode, toggle: () darkMode.value !darkMode.value }); /script !-- 深层子组件 Header.vue -- script setup import { inject } from vue; const { darkMode, toggle } inject(theme); // 注入数据 /script template button clicktoggle {{ darkMode ? 切换亮色 : 切换暗色 }} /button /template性能对比通信方式跨层级通信性能适用场景provide/inject优直接穿透主题、权限等全局配置Props逐层传递差多层转发最多嵌套2层的父子组件三、全局状态管理Pinia核心场景用户登录状态多组件共享用户信息javascript// stores/user.js import { defineStore } from pinia; export const useUserStore defineStore(user, { state: () ({ userInfo: null, token: localStorage.getItem(token) }), actions: { login(credentials) { // 模拟API请求 this.userInfo { id: 1, name: Vue开发者 }; this.token fake-token; localStorage.setItem(token, this.token); } } }); // 组件中使用 script setup import { useUserStore } from /stores/user; const userStore useUserStore(); // 访问状态 console.log(userStore.userInfo?.name); // 调用action userStore.login({ username: admin, password: 123 }); /script性能优势Pinia的状态更新是“按需触发”仅依赖该状态的组件会重新渲染比Vuex的“统一提交mutation”更高效。四、兄弟组件通信事件总线vs父组件中转方案对比以“购物车数量同步”为例方案代码复杂度可维护性适用规模父组件中转低高2-3个兄弟组件mitt事件总线中低多个兄弟组件Pinia全局状态中高跨组件共享状态父组件中转示例vue!-- 父组件 ShoppingPage.vue -- template CartList update-counthandleCountChange / TotalPrice :counttotalCount / /template script setup import { ref } from vue; const totalCount ref(0); const handleCountChange (newCount) { totalCount.value newCount; // 同步兄弟组件数据 }; /script五、通信方式选型指南按场景选择附智优达实战案例父子组件PropsEmit基础场景、v-model表单组件案例后台管理系统的“数据表格分页器”组件通信跨层级3层以上provide/inject案例电商网站的“用户登录状态”穿透传递Header→商品列表→商品详情全局共享Pinia案例多页面共享的“购物车数据”“用户信息”兄弟组件父组件中转小规模、Pinia大规模案例首页“搜索框”与“搜索结果列表”的关键词同步