vue中headers是什么_vue项目实现页面中header组件的复用

前言：vue项目页面开发中，经常会发现很多页面有相似或相同的内容，如很多页面都有header部分，你会发现除了个别的标题不一样，其他部分基本相同，虽然我们也可以每个页面都写一个header，但是当页面很多时，这样就显得有点累赘或者影响开发效率，所以我们在进行开发前，可以先根据设计稿进行分析，定义一个可以实现复用的header组件，对于个别比较特别的header，我这里结合了vue的slot进行区别处理。

一. 单独创建一个header组件：

在header组件中定义了三个具名插槽，分别对应header左中右三块的内容

分析：

1.我这里假设当前我涉及到的多个页面中，很多header左边是一个返回的箭头，也就是一张图片；

2.中间title名称每个页面基本都不同，所以我给该具名插槽默认值为空，当然，如果有很多页面(比如详情页面的title如果统一都是'详情')，你也可以给该具名插槽默认值为'详情'；

3.右边部分，我假设我这边很多header都是'更多'，所以我给了该具名插槽默认值为'更多'。

header的样式代码(针对当前demo，仅供参考)：

该header的页面效果：

二. 在页面中使用公共组件header

在多个页面中使用这个header组件，这里以两个页面复用该header组件为例。

1. 页面一：

在当前组件中引入header组件；

结合使用vue的具名插槽，该页面左右内容部分和header组件一致，无需理会，只需填充中间title部分，中间部分，我在header中定义的具名插槽，name为info。

页面效果：

2. 页面二：

该页面的header部分比页面一较为复杂，即与header组件有点差异

a. 未点击编辑按钮时：

b. 点击编辑按钮时：

该页面的代码：

代码分析：

在上边定义header组件时，我是分别给header中的左、中、右 定义对应的具名插槽，所以针对某些页面header内容部分有所差异的，可以在各自的页面中，根据对应名称的插槽进行插入填充。

建议：

如果对于vue的插槽不太了解如何使用，建议先行了解下vue的插槽的分类和使用。我前边也这对vue的插槽如何使用，以及插槽的类型进行了简单的演示，有兴趣也可以先行了解下。

vue中几种类型的插槽(slot)的使用方法