slot插槽的使用

1、

pages下面的四个组件都需要用到一个同一个header，现将header封装成一个组件。

2、MSite组件下的header内容

3、

HeaderTop中，通过两个slot插槽占位，并给slot一个name属性，后面组件在使用slot占位时通过name来关联，中间的内容是固定的结构，只是内容不确定，我们接收一个属性用title命名。

同时将MSite中对于header的css样式拷贝过来。

放好后这个属性要接收一个值进行声明。

那么这个组件就算封装好了，接下来就是使用。

4、在MSite中使用，我们将组件导入并映射成标签

使用组件并给title传入值

<header-top title="湖北省仙桃市"> </header-top>

同时两个插槽传标签结构，将当前的span传入哪个插槽就用solt="left"和"right"赋值。就完成啦。

5、

这是效果图，在控制台也可以看到我们的组件生效啦。