插槽

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

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

3. 使用方式：

   1. 默认插槽

      父组件：
      <Son>
      	<div>html结构</div>
      </Son>
      子组件：
      <template>
      	<div>
              <!--定义插槽-->
              <slot>插槽默认内容</slot>
          </div>
      </template>
   

   2. 具名插槽

      父组件：
      <Son>
      	<template slot="center">
          	<div>html结构1</div>
          </template>
          
          <!--v-slot仅适用于templat标签和组件标签-->
          <template v-slot:footer>
          	<div>html结构2</div>
          </template>
      </Son>
      子组件：
      <template>
      	<!--定义插槽-->
          <slot name="center">插槽默认内容</slot>
      	<slot name="footer">插槽默认内容</slot>
      </template>
   

   3. 作用域插槽

      1. 理解： 数据在定义插槽的组件自身，但根据数据生成的结构需要组件的使用者来决定（数据films在Son组件中，但使用数据遍历出来的结构由App组件决定）

      2. 具体编码

         父组件：
         <Son>
             <!--
                 scope的值接收对象，子组件中slot标签可能传递多个数据，对象点属性名即可获取对应的数据，scope支持解构赋值
                 scope旧的API
                 slot-scope新的API
                 两者使用方式一致
               -->
         	<template scope="scopeData">
             	<!--生成的是ul列表-->
         		<ul>
                     <li v-for="f in scopeData.films" :key="f">{{f}}</li>
                 </ul>
             </template>
         </Son>
         
         <Son>
         	<template slot-scope="{{films}}">
             	<!--生成的是h4标签-->
                 <h4 v-for="f in films" :key="f">{{f}}</h4>
             </template>
         </Son>
         子组件
         <template>
         	<div>
                 <slot :films="films"></slot>
             </div>
         </template>
         
         <script>
         	export default{
                 name:'Son',
                 //数据在子组件自身
                 data(){
                     return{
                         films: ["这个杀手不太冷", "我和我的祖国", "建军大业", "悬崖上的金鱼姬"]
                     }
                 }
             }
         </script>