当前位置：首页 > VUE

vue如何实现公用模板

2026-01-20 09:52:52VUE

实现公用模板的方法

在Vue中实现公用模板可以通过组件化、插槽（slot）、混入（mixins）或高阶组件等方式实现。以下是几种常见的方法：

使用组件化

创建一个可复用的组件，将公用部分封装在该组件中。其他组件可以引入并使用该公用组件。

<!-- PublicTemplate.vue -->
<template>
  <div>
    <header>公共头部</header>
    <slot></slot>
    <footer>公共底部</footer>
  </div>
</template>

在其他组件中引入并使用：

<template>
  <PublicTemplate>
    <div>当前页面的内容</div>
  </PublicTemplate>
</template>

<script>
import PublicTemplate from './PublicTemplate.vue';

export default {
  components: {
    PublicTemplate
  }
};
</script>

使用插槽（Slot）

插槽允许在公用模板中预留内容区域，使用时可以动态填充内容。

<!-- Layout.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

使用时：

<template>
  <Layout>
    <template v-slot:header>
      <h1>自定义头部</h1>
    </template>
    <p>主要内容</p>
    <template v-slot:footer>
      <p>自定义底部</p>
    </template>
  </Layout>
</template>

使用混入（Mixins）

混入可以将公用逻辑或模板片段注入到多个组件中。

// publicMixin.js
export default {
  template: `
    <div>
      <header>公共头部</header>
      <slot></slot>
      <footer>公共底部</footer>
    </div>
  `
};

在组件中使用：

<script>
import publicMixin from './publicMixin.js';

export default {
  mixins: [publicMixin]
};
</script>

使用高阶组件

通过高阶组件包裹目标组件，实现公用模板的复用。

// withPublicTemplate.js
export default function withPublicTemplate(WrappedComponent) {
  return {
    template: `
      <div>
        <header>公共头部</header>
        <WrappedComponent />
        <footer>公共底部</footer>
      </div>
    `,
    components: { WrappedComponent }
  };
}

使用时：

import withPublicTemplate from './withPublicTemplate.js';
import MyComponent from './MyComponent.vue';

export default withPublicTemplate(MyComponent);