vue组件-插槽

什么是插槽

• 在子组件的一对<slot>标签，存放父组件写入组件标签的东西
• 当在组件标签里面写内容的时候，这些内容显示在组件的插槽处
• 倘若写了<slot>插槽，但是没有放东西，就会显示插槽里面的内容

默认插槽

父组件中   <students>  <div>xxx</div> </students>

字组件中   <template>
                 <div>
                     <slot>默认内容</slot>
                 <div>
             <template>

具名插槽

父组件中:   <students>  
                        <div slot='z1'>xxx</div> 
                        <div slot='z2'>yyy</div> 
            </students>
                    
字组件中:   <template>
                   <div>
                       <slot name='z1'>默认内容</slot>
                       <slot name='z2'>默认内容</slot>
                   <div>
               <template>

作用域插槽：字组件可以向父组件传递数据

父组件中   <students>  <div scope='xx'>xxx</div> </students>

字组件中   <template>
               <div>
                   <slot :data='data'>默认内容</slot>
               <div>
           <template>