vue-cli3脚手架项目：HeaderTop（公共头部）组件（使用v-slot、pros实现）

目录

2.2 HeaderTop组件（使用v-slot、pros实现）

2.2.1 HeaderTop组件布局（css样式）实现

2.2.2 使用插槽实现标签的插入（预留标签）

2.2.3 代码实现

---

2.2 HeaderTop组件（使用v-slot、pros实现）

学习插槽请参考：vue官网中插槽内容，下面是项目实现的地方。

因为多个单页路由组件都有类似的头部：标题，[可选的：搜索，登录|注册]。因此可以将其抽取成一个公有的组件，以实现组件的复用。复用组件命名为HeaderTop组件。

2.2.1 HeaderTop组件布局（css样式）实现

1 要求：实现三栏布局（其中两栏可能没有）

三栏和一栏

2 方法

方法1：可以使用绝对定位加transform

方法2：使用flex布局（代码实现的）

2.2.2 使用插槽实现标签的插入（预留标签）

1 方法1：使用v-slot实现具名标签、prop实现父组件传值给子组件

因为HeaderTop组件是可以复用的组件，又每一个使用该组件需要设置的标题不一样，所以标题可以使用prop方式传递

 

2 方法2：使用v-slot实现具名标签、作用域插槽（子组件传值给父组件）

标题可以使用作用域插槽方式传递

2.2.3 代码实现

该组件是项目中的一个小组件，是在vue-cli3中使用。参考代码时，请自行设置好目录，运行时所需要的其他代码，如设置路由的index.js、跟组件App.vue、入口js main.js 等。

给出src部分目录，如下