制作自定义vue组件及使用前言随着后期项目规模增大，代码量也会随之增加，原本的组件的实际代码（标签）都写在一个app.

前言

随着后期项目规模增大，代码量也会随之增加，原本的组件的实际代码（标签）都写在一个app.vue组件中，如果后期发生变动，就会到app.vue中进行修改，不便于后期的维护。如果将标签的实际代码写到外面作为一个单独的组件（conmponent）,当另一个组件需要使用，则只需引入此组件的一个标签表示，而不是全部标签内容，这样可以使得不同功能的代码分离，实现复用，同时也便于后期的维护，查阅。

原本引入ant-design-vue官网中的一个布局代码，分为头部（header）、中间内容区、脚部（footer）。根据需求，需要将头部，脚部作为不变的内容，而内容区是变化的，作为router-view路由引入。而头部，尾部的代码基本上不会变动，且代码也偏长，所以为了便于查看，将这些长长的内容，放置到单独的文件中，真正使用的代码部分简洁明了。

因此自定义组件指的是将头部，脚部的代码制作为一个单独的组件，并根据需要在其他组件中使用，但因不了解vue,特地记录使用过程。顺便了解vue的概念，原理。

定义组件

查看原本app.vue中的代码组成：

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          v-model:selectedKeys="selectedKeys1"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">
          nav 1
        </a-menu-item>
        <a-menu-item key="2">
          nav 2
        </a-menu-item>
        <a-menu-item key="3">
          nav 3
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            mode="inline"
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <template #title>
              <span><user-outlined />subnav 1</span>
            </template>
            <a-menu-item key="1">option1</a-menu-item>
            <a-menu-item key="2">option2</a-menu-item>
            <a-menu-item key="3">option3</a-menu-item>
            <a-menu-item key="4">option4</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <span><laptop-outlined />subnav 2</span>
            </template>
            <a-menu-item key="5">option5</a-menu-item>
            <a-menu-item key="6">option6</a-menu-item>
            <a-menu-item key="7">option7</a-menu-item>
            <a-menu-item key="8">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <template #title>
              <span><notification-outlined />subnav 3</span>
            </template>
            <a-menu-item key="9">option9</a-menu-item>
            <a-menu-item key="10">option10</a-menu-item>
            <a-menu-item key="11">option11</a-menu-item>
            <a-menu-item key="12">option12</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
        Content
      </a-layout-content>
    </a-layout>
    <a-layout-footer style="text-align: center">
      ******footer********
    </a-layout-footer>
  </a-layout>
</template>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

定义头部组件the-header

Step1、创建组件文件the.header.vue（位于vue工程的conmponent目录下）

Step2、编写组件代码

<template>
<!--  自定义header头部组件-->
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
        theme="dark"
        mode="horizontal"
        v-model:selectedKeys="selectedKeys1"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="1">
        nav 111
      </a-menu-item>
      <a-menu-item key="2">
        nav 2
      </a-menu-item>
      <a-menu-item key="3">
        nav 3
      </a-menu-item>
    </a-menu>
  </a-layout-header>
</template>


<!--导入组件-->
<script lang="ts">
import { defineComponent } from 'vue';
</script>

定义头部组件the-footer

类似### 定义头部组件the-header；略。

导出组件

以the-header组件为例

如果想在另一个组件中使用该组件，需要导出（export），在另一个组件中导入（import）解构使用¹。

需要定义一个外部使用该组件的名字，此处为the-header，这样在其他组件中使用该组件可以用<组件名></组件名>的形式，如 <the-header></the-header>

export default defineComponent({
  // 定义外部使用此组件的组件名 the-header
  name: 'the-header'
});

完整代码：写在script标签中

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  // 定义外部使用此组件的组件名 the-header
  name: 'the-header'
});
</script>

引入组件

在另一个文件（app.vue）中想使用the-header,需要进行如下三步：

Step1、导入组件

在script标签中，使用import关键字导入组件/模块。

// step1.导入组件
import TheHeader from '@/components/the-header.vue';

分析：由于在自定义组件的文件（the-header.vue）中导出的方式为export default defineComponent({表示导出为默认组件 ,则导入该组件结构时，无需添加{}，直接使用，且名称任意，但不能和设定的导出组件名相同，此处用驼峰法的形式（TheHeader），后面用来注册组件。

Step2、注册组件

采用在模块中局部注册²的方式来注册组件。

export default defineComponent({
  name: 'app',
  // Step2.注册为组件
  components:{
    TheFooter,
    TheHeader,
  }
});

Step3、使用组件

<!--    Step3.使用组件  （组件名和组件内部导出设定的组件名一致，即the-header-->
    <the-header></the-header>

完整代码：

<template>
  <a-layout id="components-layout-demo-top-side-2">
<!--    Step3.使用组件  （组件名和组件内部导出设定的组件名一致，即the-header-->
    <the-header></the-header>
<!--      中间的内容部分是动态变化的，使用route-view-->
      <router-view/>
    <the-footer></the-footer>
    </a-layout>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
// step1.导入组件
import TheHeader from '@/components/the-header.vue';
import TheFooter from "@/components/the-footer.vue";


export default defineComponent({
  name: 'app',
  // Step2.注册为组件
  components:{
    TheFooter,
    TheHeader,
  }
});
</script>



<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

实际的页面内容部分的代码变为：

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <the-header></the-header>
      <router-view/>
    <the-footer></the-footer>
    </a-layout>
</template>

原本的使用方式（自定义组件前）：

现在的使用方式（自定义组件后）：

可以直观的发现，使用自定义组件后，原本的appt.vue中的代码量少了很多，内容结构一目了然。

小结

步骤：

定义组件
导出组件
引入组件（①导入组件；②注册组件；③使用组件）

制作自定义vue组件及使用

前言

定义组件

定义头部组件the-header

定义头部组件the-footer

导出组件

引入组件

小结

参考

Footnotes