背景：vue 项目中 经常会遇到好几个页面 公用一个组件 但是针对某一个地方可能显示的内容不一样，这个时候我们难道要再写一个组件吗？当然不！这个时候我们就用到了 slot 插槽！
简言之，把你需要的内容 插到相应的位置...
下面介绍它的用法：
1.单个插槽
父组件
<navbar>
<div class="">
slot content
</div>
</navbar>
子组件
<template>
<div class="">
<slot>123</slot>
</div>
</template>
这个时候 页面就会显示 slot content
如果父组件里没有添加内容，就会显示 123
2.命名插槽
父组件
<navbar>
<div slot="one">
<button type="button" name="button">454</button>
</div>
<div slot="two">
slot two
</div>
</navbar>
子组件
<template>
<div class="">
<slot name="one">one</slot>
<slot name="two">two</slot>
<slot>two2</slot>
</div>
</template>
页面显示
