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

enjsky.G

于 2021-05-26 11:48:24 发布

阅读量412

点赞数

分类专栏： # vue项目实践文章标签： javascript css html5 vue.js css3

本文链接：https://blog.youkuaiyun.com/My_IT_Study/article/details/117285259

版权

本文档详细讲解了在Vue.js项目中如何封装并使用Header组件，旨在提高代码复用性。通过创建Header.vue文件，定义组件结构，包含关闭按钮、标题和右侧文本，并通过props传递数据。在编辑资料页面作为实例引用组件，展示组件效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【温馨提示】：若想了解更多关于本次项目实战内容，可转至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="">

最低0.47元/天解锁文章