Vue scope with the new slot

2.6, using the scope slots have a different place;

Personal understanding of the scope of slots is to make the data sub-assemblies can be used in the parent assembly; also a way to transfer the data;

Not much to say, on the code

Subassembly define a slot, and defines a need to pass data to the parent element

html:

<template>
    <div class="card-wrap">
         
        <div class="foot">
            <slot name="todo" v-bind:user="user">
                
            </slot>
        </div>
         
    </div>
</template>

　　js:

export default {
    data(){
        return{
             user:{
                 lastname:'qiao',
                 age:12,
                 firstName:'zhang'
             }
        }
    }
}

　　

 

Parent components use:

First reference component and registration;

Then use the following

<Card> 
           
                <Template V-slot: TODO = "slotProps"> 
                    {slotProps.user.age} {} 
                    {} {} slotProps.user.lastname 
                </ Template> 
                 
           
        </ Card> 

// slotProps can name 
// slotProps acess attribute data is set on all the sub-assembly tab slot v-bind: user = "user "