Vue插槽

插槽：形象的说就是挖个坑，等着组件的使用者进行填充
一、作用
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
二、分类
vue的插槽有三种：分别是默认插槽、具名插槽、作用域插槽
三、使用方式
（1）默认插槽

父组件中:
<Category>
      <div>html结构</div>
</Category>

子组件中:
<template>
     <div>
       <!--定义插槽-->
       <slot>插槽默认内容</slot>
     </div>
</template>

（2）具名插槽

父组件中:
<Category>
    <template slot='center'>
      <div>html结构1</div>
    </template>
    <template v-slot:footer>
       <div>html结构2</div>
    </template>
</Category>

子组件中:
<template>
  <div>
    <slot name='center'>插槽默认内容</slot>
    <slot name='footer'>插槽默认内容</slot>
  </div>
</template>

（3）作用域插槽
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的机构由App组件决定）
2.具体编码：

父组件中:
<Category>
    <template slot='scpeData'>
        <!--生成的ul列表-->
        <ul>
           <li v-for='(m,index)  in scpeData.games' :key='index'>{{m}}</li>
        </ul>
    </template>
</Category>
<Category>
    <template slot='scpeData'>
        <!--生成的ol列表-->
        <ol>
           <li v-for='(m,index)  in scpeData.games' :key='index'>{{m}}</li>
        </ol>
    </template>
</Category>

子组件中:
<template>
  <div>
    <slot :games='games'>插槽默认内容</slot>
  </div>
</template>
<script>
export default {
   name:'CategoryC',
   props:['title'],
   data(){
     return {
        games:['火锅','烧烤','小龙虾','牛排'],
    }
}
}
</script>