slot插槽的使用

1.匿名插槽

描述: 父组件 传递 结构 给子组件

实现效果：

父组件：index.vue

子组件cagegory.vue

总结:匿名插槽中所使用的的插槽没有"名字",父组件中传递的所有html结构会毫无保留的传递给子组件中的<slot></slot>插槽。

 2.具名插槽

实现效果

描述：具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

父组件

子组件

总结：即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即： 父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的

3.作用域插槽

实现效果

作用：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容（父组件接收必须使用template包裹，用scope=" xxx"接收）

父组件

子组件