插槽

使用方式：

（1）默认插槽

<!-- 父组件 -->
<Category>
    <div>
        html结构
    </div>
</Category>

<!-- 子组件 -->
<template>
  <div class="category">
    <!-- 定义一个插槽，当使用者没有传递具体结构时，使用默认值填充 -->
    <slot>默认插槽</slot>
  </div>
</template>

（2）具名插槽

<!-- 父组件 -->
<Category>
    <template v-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）作用域插槽

​ a. 定义：数据在组件的自身，但数据生成的结构由组件的使用者决定（list数据在Category 组件中，但使用数据遍历出来的结构由App组件决定）

​ b. 使用：

<!-- 父组件 -->
<Category>
    <template slot-scope="{games}">
        <ul>
            <!-- 无序列表 -->
            <li v-for="(item,index) in games" :key="index">{{ item }}</li>
        </ul>
    </template>
</Category>

<Category>
    <template slot-scope="{games}">
        <ol>
            <!-- 有序列表 -->
            <li v-for="(item,index) in games" :key="index">{{ item }}</li>
        </ol>
    </template>
</Category>

<!-- 子组件 -->
<template>
  <div>
    <!-- 定义一个插槽，当使用者没有传递具体结构时，使用默认值填充 -->
    <slot :games="games">默认插槽</slot>
  </div>
</template>

<script>
export default {
  name: "MyCategory",
  // 数据在组件自身
  data() {
    return {
      games: ['魔兽争霸', 'QQ飞车', 'Dota自走棋', '地下城与勇士']
    }
  }
}
</script>

注：作用域插槽也可以添加name属性，使用时同理具名插槽