Vue passes parameters for slots in the loop

Vue solves the problem of using slot to pass parameters in the loop

1,v-slot

<List :dataList="list" v-slot:fatherSlot="{item}">
    <ListItem slot="fatherSlot">
         <div slot="child">{
   
   {item.title}}</div>
     </ListItem>
 </List>

2,slot-scope

<List :dataList="list" >
   <ListItem slot="fatherSlot" slot-scope="slotProps">
        <div slot="child">{
   
   {slotProps.item.title}}</div>
    </ListItem>
</List>

3,slot-scope+v-slot

<List :dataList="list" v-slot:fatherSlot="slotProps">
     <ListItem slot="fatherSlot">
          <div slot="child">{
   
   {slotProps.item.title}}</div>
      </ListItem>
  </List>

Guess you like

Origin blog.csdn.net/shidouyu/article/details/125368588