Vue插槽Slot

插槽

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

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

默认插槽

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

<!--子组件B：-->
<template>
 <div>
    <!-- 定义插槽，如果父组件每天内容，则会显示默认内容 -->
    <slot>插槽默认内容...</slot>
 </div>
</template>

具名插槽

<!--父组件A：-->
 <Category>
   <template slot="center">
     <div>html结构1</div>
   </template>
   
   <!-- 
     当有template标签时，可以使用 v-slot:footer 去指定插槽 
     template标签在Vue解析的时候，是不会加入DOM元素中
   -->
   <template v-slot:footer>
      <div>html结构2</div>
   </template> 
   
 </Category>
<!--子组件B：-->
<template>
  <div>
     <!-- 定义插槽 -->
     <slot name="center">插槽默认内容...</slot>
     <slot name="footer">插槽默认内容...</slot>
  </div>
</template>

作用域插槽

1. 理解：数据在子组件的自身，但根据数据生成的结构需要父组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

2. 具体编码：

   <!--
     父组件A：
     在使用template标签，可以通过 'scope="scopeData"' 接收子组件数据
     子组件通过 `<slot :games="games"></slot>` 绑定数据
   
     熟练ES6语法，可以对传递的数据进行解构获取
     :scope="{ games }"
   -->
   <Category>
     <template scope="scopeData">
       <!-- 生成的是ul列表 -->
       <ul>
         <li v-for="g in scopeData.games" :key="g">{{g}}</li>
       </ul>
     </template>
   </Category>
   
   <Category>
     <template slot-scope="scopeData">
       <!-- 生成的是h4标题 -->
       <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
     </template>
   </Category>
   
   <!--子组件B：-->
   <template>
     <div>
       <slot :games="games"></slot>
     </div>
   </template>
   
   <script>
     export default {
       name:'Category',
       props:['title'],
       //数据在子组件自身
       data() {
         return {
           games:['红色警戒','穿越火线','劲舞团','超级玛丽']
         }
       },
     }
   </script>