Vue插槽

作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件=>子组件

分类： 默认插槽 具名插槽 作用域插槽

使用方式：
3.1 默认插槽

 <!-- 父组件中 -->
 <!-- category为自定义组件 -->
<category>
    // 这里是要插入的html结构
    <h2>ceshi</h2>
</category>

<!-- 子组件中 -->
<template>
    <div class="category">
        // 定义插槽
        <slot>这里是默认的内容（插槽默认内容）</slot>
    </div>
</template>

3.2 具名插槽

<!-- 父组件中 -->
<category>
    <!-- 使用 slot='插槽名称' 指定插槽 -->
    <template slot="center">
        <h2>插入的结构1</h2>
    </template>
    
    <!-- 使用 v-slot:插槽名 指定插槽-->
    <template v-slot:footer>
        <h4>插入的结构2</h4>
    </template>
</category>


<!-- 子组件中 -->
 <template>
     <div class="category">
         <slot name="center">插槽默认内容1</slot>
         <slot name="footer">插槽默认内容2</slot>
     </div>
 </template>

3.3 作用域插槽

<!-- 父组件中 -->
<category>
    <!-- category是自定义组件 使用 slot='插槽名称' 指定插槽 -->
    <!-- slot-scope也可以写成scope -->
    <template slot="center" slot-scope="name">
        <h4>传递过来的名字是： {{name.childName}}</h4>
    </template>
</category>

<!-- 子组件中 -->
<!-- name是自己的属性，childName是传递过去的属性 -->
<slot name="center" :childName='name'>插槽默认内容1</slot>