vue.js项目实战运用篇之抖音视频APP-第十三节： Header组件功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十三节： Header组件功能

功能分析

在我们编辑资料、消息中都有也顶部标题，为了提高代码复用性，将其封装成一个组件，在需要使用的位置，引入组件即可。

组件实现

1.组件结构，在组件文件夹common/components中闯将header文件夹，新建Header.vue文件，如下：

2.组件布局
组件中包含左侧关闭按钮，标题，右侧文本内容等。

<template>
    <div class="user-header">
     <div class="back" v-if="hasLeft">
       <span class="iconfont icon-guanbi" @click="$router.back()"></span>
     </div>
      <div class="">