插槽作用域使用

插槽作用域

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

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> 的语法

用处

当你想要封装一些可定制操作的列表插槽的时候，就会使用到。他可以让你将插槽的内容暴露给每一个使用的组件插糟，在插槽的内容区域，你可以获取收据进行一些复杂操作和判断。

例子

Element-UI中的table就是使用的插糟作用域来实现的。