1.vue的通信方式Vue组件通信方式根据组件间的关系父子、兄弟、跨级、任意组件可分为多种方案。一、父子组件通信props父-子父组件通过属性向子组件传递数据子组件通过defineProps接收!-- 父组件 -- Child :infoparetInfo/ !-- 子组件 -- script setup const propsdefineProps({info:String}) /script$emit(子-父子组件通过defineEmits触发事件父组件监听并处理。!-- 子组件 -- script setup const emitdefineEmits([update-innfo]) emit(update-info,data from child) /script !-- 父组件 -- Child update-infohandleUpdate /v-model(双向绑定Vue3中v-model默认绑定modelValue和update:modelValue,适用于表单等双向同步场景!-- 父组件 -- Child v-modeltext / !-- 子组件 -- script setup const props defineProps([modelValue]) const emit defineEmits([update:modelValue]) /script$refsdefineExpose(父调用子方法父组件通过ref获取子组件实例子组件需显式暴露方法或数据。!-- 子组件 -- script setup const count ref(0) const increment () count.value defineExpose({ count, increment }) // 暴露给父组件 /script !-- 父组件 -- Child refchildRef / button clickchildRef.increment()/button二、跨层级通信祖孙/后代适用于深层嵌套组件。provide/inject祖先组件提供数据任意后代组件注入使用适合主题、语言等全局配置。!-- 祖先组件 -- script setup import { provide, ref } from vue const theme ref(dark) provide(theme, theme) /script !-- 后代组件 -- script setup import { inject } from vue const theme inject(theme, light) // 第二个参数为默认值 /script$attrs/$listeners(Vue 2)/$attrs(Vue3)Vue3中$attrs包含所有未声明为props的属性和事件监听器可用于高阶组件透传。!-- 中间组件 -- template InnerComponent v-bind$attrs / /template三、任意组件通信无直接关系适用于兄弟组件或完全无关组件。Event Bus中央事件总线使用mitt或tiny-emitter库实现Vue3已移除内置$busnpm install mitt// utils/eventBus.js import mitt from mitt export default mitt() // 组件A发送 import bus from /utils/eventBus bus.emit(event-name, data) // 组件B接收 import bus from /utils/eventBus import { onMounted, onUnmounted } from vue onMounted(() bus.on(event-name, handler)) onUnmounted(() bus.off(event-name, handler))状态管理库Pinia/VuexPinia是Vue官方推荐的新一代状态管理库适用于中大型项目。// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ name: Alice }), actions: { updateName(name) { this.name name } } }) // 任意组件 import { useUserStore } from /stores/user const user useUserStore() console.log(user.name)四、不推荐的方式$parent/$children:耦合度高破坏组件封装性难以维护。$root:仅适用于简单原型不适用于复杂应用。选择建议组件关系推荐方式父子props$emit(首选兄弟Event Bus小型项目或Pinia大型项目跨级provide/inject全局状态Pinia官方推荐2.vue的路由模式在Vue.js中支持两种路由模式hash模式和history模式。①Hash模式#特点:URL中包含一个#符号例如http//example.com/#/user/id。这种模式不需要后端配置因为它依赖前端路由的hash变化来控制页面内容。兼容性最好几乎可以在所有浏览器上运行。配置实例import Vue from vue; import VueRouter from vue-router; import Home from ./components/Home.vue; import User from ./components/User.vue; Vue.use(VueRouter); const routes [ { path: /, component: Home }, { path: /user/:id, component: User } ]; const router new VueRouter({ mode: hash, // 使用hash模式 routes // (缩写) 相当于 routes: routes }); new Vue({ router, render: h h(App) }).$mount(#app);②History模式推荐用于生产环境特点URL中没有#符号例如http://example.com/user/id。这种模式要求你的服务器配置支持HTML5 History API即在服务器端正确配置所有的路由到同一个入口文件通常是index.html。看起来更干净用户体验更好。需要后端支持或者在Vue应用中配合使用vue-router的fallback选项。配置实例:import Vue from vue; import VueRouter from vue-router; import Home from ./components/Home.vue; import User from ./components/User.vue; Vue.use(VueRouter); const routes [ { path: /, component: Home }, { path: /user/:id, component: User } ]; const router new VueRouter({ mode: history, // 使用history模式需要后端支持或配置fallbackToHash: true routes // (缩写) 相当于 routes: routes }); new Vue({ router, render: h h(App) }).$mount(#app);注意事项History模式在生产环境中使用时需要确保你的服务器正确配置。例如对于Node.js服务器你可以使用connect-History-api-fallback中间件或者在Nginx中将所有路由代理到同一入口文件通常是index.html。这样当访问一个不存在的路由时服务器不会返回404错误而是返回应用的入口页面由前端路由接管后续的路由处理。History模式的fallback‌如果你不想或不能修改服务器配置以支持HTML5 History Mode你可以在Vue Router中设置fallback: true或使用hash模式作为后备方案。const router new VueRouter({ mode: history, fallback: true, // 当浏览器不支持history.pushState时自动回退到hash模式 routes // (缩写) 相当于 routes: routes });或者在路由配置中使用特定的组件来处理404页面const router new VueRouter({ routes: [ { path: *, component: NotFoundComponent } // 捕获所有路由或404路由到NotFoundComponent组件 ] });选择哪种模式取决于你的项目需求和对SEO、URL友好性的考虑。对于现代单页应用SPA通常推荐使用history。