vue solt传参

1. vue 默认插槽

　　默认插槽

//父组件
<div>
     <h3>父组件</h3>
     <testChild>
         <div>默认插槽</div>
     </testChild>
</div>

//子组件
<div>
    <h4>子组件</h4>
    <slot></slot>
</div>

 

　　具名插槽

　　　　

//父组件
<div>
     <h3>父组件</h3>
     <testChild>
         <div solt="test">默认插槽</div>   //v-slot: + 插槽名
     </testChild>
</div>

//子组件
<div>
    <h4>子组件</h4>
    <slot name="test"></slot>
</div>

　　solt传参

　　

//父组件
<div>
     <h3>父组件</h3>
     <testChild>
         <div v-solt:test="data">默认插槽</div>   //具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性
     </testChild>
</div>

//子组件
<div>
    <h4>子组件</h4>
    <slot name="test" :data="data"></slot>
</div>

或者

<div class="child4">
     <slot name="top" :data="item"></slot>
</div>
<child4>
     <template #top="slotProps">
          <div>{{slotProps.data}}</div>
     </template>
       <template #top="{data}">   //解构插槽 
          <div>{{data}}</div>
     </template>
</child4>