Vuex场景下应用展示/容器（智能/木偶）组件模式的问题咨询

基础组件定位边界 #

• 展示组件（木偶组件）：核心职责仅负责视图渲染与用户交互触发，不耦合任何业务状态（包括Vuex）。所需数据全部通过props传入，所有用户操作通过emit抛给父组件，本身具备高复用性、可独立测试，脱离当前业务场景也可正常运行。
• 容器组件（智能组件）：核心职责为对接业务状态与处理业务逻辑，直接从Vuex读取state、调用actions，将展示组件需要的状态通过props传递，监听展示组件抛出的事件并对应触发Vuex相关逻辑。

多层嵌套组件事件透传的解决方案 #

针对多层嵌套导致的透传冗余问题，业内主流有三种可落地的方案：

方案1：批量属性/事件透传 #

Vue2 可使用 v-bind="$attrs" + v-on="$listeners"，Vue3 直接使用 v-bind="$attrs"，中间层展示组件不需要显式声明props、定义emit事件，直接将上层传入的属性和事件批量透传给下层组件，几乎不会产生冗余代码。
示例中间层组件代码：

<template>
  <!-- Vue3 写法 -->
  <ChildComponent v-bind="$attrs" />
</template>

该方案不会破坏展示组件的独立性，中间层组件依然不耦合任何业务逻辑，是层级不超过5层的场景下的首选方案。

方案2：引入局部容器组件 #

如果嵌套层级过深，且某一个中间节点下的所有子组件都依赖同一批Vuex状态/事件，可以将该中间节点升级为局部容器组件，不需要所有容器组件都放在最顶层。该局部容器仅对接它下属子组件需要的那部分Vuex逻辑，上层不需要再透传相关属性和事件，可大幅减少透传层级。
该方案适用于局部组件树复用性极低，仅服务于当前业务场景的情况。

方案3：依赖注入 #

对于全局通用的操作（比如全局弹窗触发、用户登录态修改等），可在顶层容器组件通过provide注入需要调用的方法，深层的展示组件通过inject获取方法直接调用，不需要逐层透传。注意不要直接注入整个Vuex实例，仅注入当前组件树需要的特定方法，避免过度耦合。

常见方案误区说明 #

• 展示组件直接调用Vuex actions：仅在组件完全不会在其他业务场景复用的前提下可以使用，否则会直接破坏展示组件的可移植性和可测试性，后续复用时需要重写所有耦合Vuex的逻辑，长期维护成本更高。
• 事件总线方案：不推荐使用，核心问题是事件的触发和监听是隐式关联，没有父子组件的明确调用关系，出现问题很难排查，多组件监听同一事件时容易出现逻辑冲突，项目规模扩大后维护成本会急剧上升，完全可以用上述三种方案替代。

内容的提问来源于stack exchange，提问作者Jane Alefragi