插槽作用域

让插槽内容能够访问子组件中才有的数据

1. 在一个组件(设定组件是User)设定插槽时，在插槽上绑定数据

   <template>
       <slot v-bind:user="user">
           {{ user.name }}
       </slot>
   </template>
   <script>
       export default {
           props: {
               user,
        }
       }
   </script>
   

2. 使用绑定在插糟上的数据

   // 普通写法
   <user>
    <template v-slot='user'>
        {{user.name}}
       </template>
   </user>
   
   // 独占默认插槽的缩写语法
   <user v-slot:default="slotProps">
     {{ slotProps.user.firstName }}
   </user>
   <user v-slot="slotProps">
     {{ slotProps.user.firstName }}
   </user>
   

   注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确

   只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法