src-components调用链与即时聊天组件树

码路人
12 阅读4分钟

src/components 里的文件，没人引用就是一堆废纸

很多 Vue 初学者以为，把文件放到 src/components 文件夹里，就会自动生效。 其实完全不是。这篇文章就来说清楚：组件怎么才算"真正被用到"。

🤔 先说一个常见误区

初学时，很多人会这样理解：

"我把组件放到 src/components，它就可以在模板里用了。"

错。

src/components 只是一个约定俗成的存放目录，不是自动生效的魔法文件夹。

放在里面的组件，如果没有人引用它，它就永远不会渲染，永远不会执行。

✅ 组件真正"生效"，只有两种方式

方式一：全局注册（所有页面都能直接用）
方式二：局部引用（谁需要谁 import，谁 import 谁才能用）

🌐 全局注册是什么感觉

有些组件在整个项目里到处都要用，比如：

  • 顶部栏
  • 左侧菜单
  • 标签页
  • 全局提示

这类组件写进全局注册之后，任何页面不用单独 import，直接在模板里写标签就能用：

<site-bar />
<personal-bar />
<tabs-bar />
<base-tip />

全局注册的核心逻辑（以常见写法为例）：

// src/components/globalComponents.js
import Vue from 'vue'
import SiteBar from './SiteBar/index.vue'

const globalComponents = {
  install(Vue) {
    Vue.component('SiteBar', SiteBar)
    // ... 其他全局组件
  }
}

export default globalComponents

// src/main.js
import globalComponents from './components/globalComponents'
Vue.use(globalComponents) // 在这里注册进去

这样，SiteBar 就变成了整个项目都能用的"公共组件"。

🔗 局部引用：大多数组件的使用方式

大部分业务组件不会全局注册。

它们是：谁需要，谁去 import，谁 import 才能用。

以即时聊天模块为例，它的组件树是一层一层嵌套引用的：

src/views/review-service/instant-messaging/index.vue
  └─ <im-layout />            ← 这个页面 import 了 Layout

src/components/.../Layout/index.vue
  ├─ <menu-bar />             ← Layout 里 import 了 MenuBar
  ├─ <conversation-list />    ← 会话列表（menuBar 切换到 Tab 1 时）
  ├─ <contacts-list />        ← 通讯录（menuBar 切换到 Tab 2 时）
  ├─ <message-window />       ← 有当前会话时显示
  ├─ <welcome-page />         ← 没有会话时显示
  ├─ <business-column />      ← 右侧业务栏
  └─ <image-previewer />      ← 图片预览

src/components/.../BusinessColumn/index.vue
  ├─ <BaseInfo />             ← 学员基本信息
  ├─ <SpeechList />           ← 个人话术
  └─ <WokNotice />            ← 工作通知

这就是典型的局部引用调用链：一层引用一层，没被引用到的，永远不会渲染。

🗂️ 即时聊天模块，每一层在做什么

页面入口层

instant-messaging/index.vue 是聊天功能的入口页面。

它主要负责"初始化"，不负责画界面：

  • 获取老师的聊天账号
  • 拉取 IM 配置
  • 初始化 TIM SDK
  • 绑定 TIM 事件
  • 登录 IM

初始化完毕之后，它把 <im-layout /> 渲染出来，让布局层接管页面。

布局层

Layout/index.vue 是聊天页面的"骨架"。

它负责把聊天界面的各个区域分好：

  • 左侧菜单栏（MenuBar）
  • 根据 Tab 切换的会话列表 / 通讯录
  • 中间的消息窗口（有会话时显示）/ 欢迎页（无会话时显示）
  • 右侧业务栏
  • 图片预览浮层
  • 音频通知元素

这层是"结构性组件"，它不负责具体业务，只负责把各个子组件摆放到正确的位置。

业务栏层

BusinessColumn/index.vue 是聊天右侧的业务信息区域。

它会根据当前会话和业务类型，切换显示：

  • 学员基本信息（BaseInfo）
  • 个人话术列表（SpeechList）
  • 工作通知（WokNotice）

🔎 怎么快速找到一个组件在哪里被调用

以后看代码时，不要在 src/components 文件夹里盲搜。

最快的方式是直接搜组件名：

# 找 BaseInfo 被哪里引用了
rg -n "BaseInfo|<BaseInfo|import BaseInfo" src

# 找 ImLayout 被哪里引用了
rg -n "ImLayout|<im-layout|import ImLayout" src

搜到之后，从父组件往子组件方向追，一层一层拆开，很快就清楚了。

🧠 整个应用的调用链长这样

main.js
└─ 注册全局组件、插件、store、router

App.vue
└─ <router-view />（总出口）

Home.vue（后台壳）
└─ <site-bar />（全局）
└─ <tabs-bar />（全局）
└─ <router-view />（后台页面出口）

即时聊天入口页
└─ <im-layout />（局部引入）

Layout
└─ <ConversationList />、<MessageWindow />、<BusinessColumn />...

BusinessColumn
└─ <BaseInfo />、<SpeechList />、<WokNotice />

从最上面的 main.js 到最深的 BaseInfo，是完整的一条引用链。

断掉任何一层的引用，下面的组件就不会渲染。

🏁 一句话总结

src/components 不是入口目录，组件不会自动生效。
组件必须被 import 或全局注册后才会激活。
搞清楚"谁引用了谁"，比知道"目录里有什么"更重要。

这是 Vue2 学习系列第二篇。

下一篇：Home.vue 里为什么有两个 <router-view>？它们各管什么？

avatar
文章
阅读
粉丝