插槽的使用

什么是插槽（slot）：

       将父组件传递的数据在子组件中显示出来。类似在子组件中预留了接口，接口中连接的内容由父组件来决定，弥补视图的不足（子组件的innerHTML部分父组件无法直接添加信息）

好处：

        1. 使组件具有更好的扩展性

        2. 更好对组件进行封装：抽取共性，将个性部分留给插槽 

插槽的分类：

        （1）匿名插槽（默认插槽）：一个组件有且只有一个默认插槽（default）

//子组件中的使用：
<slot></slot>定义插槽

//父组件中的使用：
<子组件名>

    <template v-slot:default>
     插入的元素
    </template>

</子组件名>

          （2）具名插槽：有名称的插槽，给<slot>标签添加name属性，指定插槽名称。父组件在使用时可以将相关的内容插在指定的插槽上。

               注：（#插槽名）

<template #left></template>

           （3）作用域插槽（重点）：又称为带参数的插槽，子组件向父组件传递参数，且该参数只能在插槽中使用，父组件接收到子组件的数据后可以按不同的方式展示出来。

                    子组件在父组件中显示时，页面结构会发生改变，但是数据来源于子组件。

//Son.vue
<template>
    <div>
        <h2>我是子组件</h2>
        <slot name="sp" :lang="langList"></slot>
        <slot name="cz" :lang="langList"></slot>
    </div>
</template>
<script>
    export default{
        name: 'Son',
        data(){
            return {
                langList:['大雁塔','兵马俑','乾陵','茂陵','华山']
            }
        }
    }
</script>

//父组件：Test.vue
<template>
    <div>
        <Son>
            <template v-slot:sp="slotProps"> <!-- slotProps:表示当前数据的来源--- 来自插槽所在的子组件 -->
                {{ slotProps.lang.join('--') }}
            </template>
        </Son>
        <br><br>
        <Son>
            <template v-slot:cz="slotProps"> <!-- slotProps:表示当前数据的来源--- 来自插槽所在的子组件 -->
               <ul>
                  <li v-for="(item,index) in slotProps.lang" :key="index">
                    {{ item }}
                  </li>
               </ul>
            </template>
        </Son>
    </div>
</template>

          结果展示：