Vue2 Slot插槽

插槽让组件的复用，更加灵活。

有没有试过，在定义的组件标签中输入内容，浏览器其实是不渲染的，如果想要接收这些内容，就需要使用到 插槽Slot

匿名插槽

在子组件中，添加 slot 标签 <slot></slot>,这样就能接收在 组件标签中写入的所有内容。

<slot></slot>的位置，就决定了接收的内容的位置

具名插槽

有时候，接收回来的数据，想以一些排列的规则来规定它的位置，但匿名插槽会将所有的内容都填入那个指定位置，这不是想要的。

那么，在 子组件中定义 <slot name='top'></slot> 添加上 name属性，在父组件中调用子组件时，子组件内的新增内容标签 添加上 slot='top' 属性即可  <span slot='top'>这在上方</slot>

作用域插槽

如果 （在父组件中调用）子组件中的插槽内容希望使用到子组件中的数据，必须使用到 作用域插槽   <slot name="btn" :myname="num"></slot> （子组件中）   

子组件标签中 <button slot="btn" slot-scope="obj">click {{obj.myname}}</button>  

slot-scope="obj" 专门接收（slot）对应的 子组件身上slot标签上的属性，作为 obj的属性

作用域插槽还有其他的写法