vue组件-插槽

wuchangjian2021-11-05 16:10:29编程学习

文章目录

  • 什么是插槽
  • 默认插槽
  • 具名插槽
  • 作用域插槽:字组件可以向父组件传递数据

什么是插槽

  • 在子组件的一对<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>

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。