vue组件事件交互遵循单向数据流：props自上而下传递，emit自下而上传递；父子用props+$emit，跨层级用provide/inject，非父子用eventbus，复杂状态用pinia/vuex。
Vue 组件间的事件交互设计，核心是围绕“单向数据流”展开的：数据自上而下传递（props），事件自下而上传递（emit）。这不是限制，而是为了保障状态可追踪、组件可预测。真正需要关注的，是不同场景下如何选对模式、避开常见陷阱。
父子通信：Props + $emit 是默认且首选的方式
这是 Vue 官方推荐的基础路径，适用于绝大多数直接嵌套关系。
- 父组件用 v-bind（或简写 :）传值，子组件用 defineProps（Vue 3）或 props 选项接收；传入的数据是响应式的，父组件更新，子组件自动同步
- 子组件不能直接改 props，想“改变父的数据”，必须调用 defineEmits（Vue 3）或 this.$emit（Vue 2）触发事件，由父组件在监听回调里做真实修改
- 事件名推荐用 kebab-case（如 @update-user），模板中自动兼容大小写；一次 emit 可传多个参数，父组件监听函数会全部接收到
跨层级通信：provide / inject 解决深层透传问题
当组件嵌套很深（比如 A → B → C → D），逐层 props 传递既冗余又脆弱，这时 provide / inject 就派上用场了。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章