如何在Vue中引用同页面的公共部分？

Question

在Vue项目开发中，如何高效地引用同页面中的公共部分（如头部、导航栏、底部等），以实现代码复用和维护便利，是一个常见且重要的技术问题。通常，可以通过组件化开发思想将这些公共部分抽取为独立的Vue组件，然后在需要的页面中通过`import`引入并注册使用。此外，还可以结合`Vue Router`的嵌套路由功能，将公共部分作为父路由组件，实现页面间共享布局。对于简单的页面内公共元素，使用`mixins`或`自定义指令`也能达到一定程度的复用效果。那么，如何根据项目复杂度选择最适合的复用方式？

Answer 1

一、组件化开发：基础复用之道

在Vue开发中，最基础也是最推荐的方式是将公共部分抽取为独立的组件。例如，头部（Header）、导航栏（Nav）、底部（Footer）等结构可以分别封装为独立的Vue单文件组件。

• 优点：高复用性、易于维护、职责清晰。
• 适用场景：中小型项目或页面结构较统一的场景。

示例代码如下：

    // Header.vue
    <template>
      <header>公共头部</header>
    </template>

    // Home.vue
    <template>
      <div>
        <Header />
        <main>页面主体内容</main>
      </div>
    </template>

    <script>
    import Header from '@/components/Header.vue'
    export default {
      components: { Header }
    }
    </script>
  

二、Vue Router嵌套路由：布局共享的进阶方案

当项目结构复杂、多个页面共享相同的布局时，可以使用Vue Router的嵌套路由功能。将公共部分作为父级路由组件，子路由页面作为动态内容区域。

结构示意图如下：

    const routes = [
      {
        path: '/',
        component: Layout,
        children: [
          { path: 'home', component: Home },
          { path: 'about', component: About }
        ]
      }
    ]
  

此时，Layout.vue中包含公共部分如Header、Nav、Footer，并使用<router-view>承载子页面内容。

优点：

• 页面结构清晰，布局统一。
• 便于权限控制、动态加载。

三、Mixins与自定义指令：轻量级复用策略

对于页面内局部逻辑或行为的复用，可以使用Mixins或自定义指令。

方式	适用场景	优点	缺点
Mixins	共享方法、生命周期钩子等逻辑	代码复用性强	命名冲突风险，可读性下降
自定义指令	DOM操作、样式绑定等行为	行为与模板分离	功能有限，不适用于复杂逻辑

示例：自定义一个高亮指令

    // main.js
    Vue.directive('highlight', {
      bind(el) {
        el.style.backgroundColor = '#ffeb3b';
      }
    });

    // 使用
    <div v-highlight>高亮文本</div>
  

四、高级复用：使用Vue插件或UI组件库

对于大型项目，建议引入成熟的UI组件库（如Element Plus、Ant Design Vue等），这些库通常已经封装了大量通用组件。

也可以开发内部的UI组件库或业务组件库，通过npm包方式引入，实现跨项目复用。

流程图示意如下：

graph TD
      A[开发公共组件] --> B[打包为NPM模块]
      B --> C[在多个项目中引入]
      C --> D[统一维护升级]

五、项目复杂度与复用方式选择建议

根据项目规模和复杂度，推荐如下策略：

• 小型项目：使用组件化+mixins/指令，快速开发。
• 中型项目：组件化+Vue Router嵌套路由，结构清晰。
• 大型项目：组件化+UI库+自定义插件+模块化设计，便于团队协作。

此外，结合Vue 3的Composition API，可以进一步优化逻辑复用方式，例如通过setup()函数与useXXX()函数封装逻辑。