插槽

概念：在父组件中，使用子组件时，子组件中的内容可能是固定的。但是有时候又需要将子组件中固定的内容进行替换。就可以使用插槽。

1 默认插槽

• 在子组件中设置插槽

  <div>
      我是头部
  </div>
  <div>
      <slot>我的内容</slot>
  </div>
  <div>
      我是底部
  </div>
  

• 在父组件中替换插槽中的内容

<son>default body</son>

2 具名插槽

如果一个组件内部有多个需要被替换的部分，可以使用具名插槽![image.png](https://p3- 默认插槽 v-slot：根据使用情况也可以用'#'代替

• 子组件 son.vue

    <h3>具名插槽</h3>
    <div>
        <div>
            <slot name="head">我是头部</slot>
        </div>
        <div>
            <slot name="content">我是内容</slot>
        </div>
    </div>

• 父组件使用

     <son>
        <template v-slot:head>defautl head</template>
        <template v-slot:content>defautl content</template>
    </son>

如果不给插槽设置 name 属性，那么将父组件中的默认内容就是用来替换这个不设置 name 属性的内容

3 作用域插槽

如果希望在父组件中的插槽中使用到子组件中对应插槽的数据源，可以使用作用域插槽（子组件 slot 中用到的数组中可以传给父组件来使用） v-bind:xxx="xxx" 在子组件中绑定一个值，该值可以传给父组件使用，这个绑定到 <slot> 元素上的属性称之为 slot props。 在父作用域中，我们可以通过 slot-scope 来访问 数据

• 子组件 son.vue

    <h3>作用域插槽</h3>
    <div>
    <!-- <div>
    <slot name="head" :sonArr="arr">我是头部</slot>
    </div> -->
    <!-- 完整 v-bind:sonArr 下面是简写形式 -->
        <div>
            <slot :sonArr="arr">
               <li v-for="(item,index)" in arr :key="index">
                            {{item.name}}
               </li>
            </slot>
        </div>
    </div>

• 父组件使用

     <son>
        <template slot-scope="scope">
        <ul>
           <li v-for="(item,index)" in scope.sonArr :key="index">
           id-----{{item.id}}----name-----{{item.name}}
           </li>
        </ul>
        </template>
    </son>