v-slot used in vue

v-slot used in vue

 

1, v-slot usage in step

　　

　　

<-! Slot.vue -> 

  <-! Specified by the name attribute named slots, no name attribute is the default slot -> 
 < slot name = "header" > I am a header </ slot > 

 < slot name = "main" > I am a main </ slot > 

 < slot : title = "title" name = "footer" > </ slot > 

 < slot > </ slot > 



// index.vue 

<-! by v- slot: footer = "title" to pass over the page to get the data slot, v-slot: xxx slot to be specified.The slot vue -> 

< slot-name >
            < Template v-slot: header > I am a new header </ Template > 
            < Template v-slot: main > ha ha ha ha </ Template > 
            < Template v-slot: default > I am a default </ Template > 
            < Template v -Slot: footer = "title" > {{}} title.title.age </ Template >         
</ slot-name > 



<! - the short form of v-slot -> 
<! - by adding the # value of the name attribute slot.vue corresponding slot -> 
<slot-name>
            <template #header>我是新的header</template>
            <template #footer="title">{{ title.title.age }}</template>
</slot-name>