参考某些商城网站的searchBar,区别仅仅是搜索框左侧的label描述和右侧的按钮，这种情况下，我们不需要根据场景定制多个组件，而可以使用插槽。将搜索框固定展示，左右侧外部传入。这种场景下用到插槽。
类型：默认插槽、具名插槽，作用域插槽
默认插槽
子组件只有一个位置有变化，那么可以使用默认插槽，外部传什么，则显示什么
子组件，留出插槽占位父组件引用子组件时，在子组件标签内写入html
具名插槽
子组件的多个地方都有变化，需要为不同的地方占位，并取不同的名字
<slot name="pre"><slot name="after">
作用域插槽
顾名思义，需要涉及到组件作用域，组件的作用域体现在每个组件只能直接引用其内部的data(){}。
使用场景：父组件需要使用子组件的数据，在父组件定义内容展示。
用法：
-
子组件通过<slot :data="childData">将数据用插槽传递出去
-
父组件通过使用该插槽，拿到数据
总结
-
默认插槽，默认展示
-
具名插槽，使用场景（多个占位），用法
内部<slot name="pre">,外部<childTag><div slot="pre"></div></childTag> -
作用域插槽，使用场景（外部用内部的数据，做内容展示
内部<slot :key="childData">外部 <childTag><template slot-scope="slot">{{slot.childData}}</template></childTag>
