slot understanding of the relationship Element-ui

Summary: When looking at some front-end use cases, see the slot-scope attribute, as early as the understanding of learning, on the slot is understandable, the results hit the slot-scope feeling of not understanding the way, so again I refer to study a bit

First slot: a parent component tags written in the sub-components of content, replacing the sub-assembly slot label

. 1  // Father 
2 <Template>
 . 3    <div class = "Father">
 . 4      <Child>
 . 5        <div> tag contents </ div>       // tag written in the sub-assembly, replace the label slot subassembly. .... here may be text, a small label may be, may be a <Template> 
. 6      </ Child>
 . 7    </ div>
 . 8 <Template>
 . 9  
10  // Child 
. 11 <Template>
 12 is    <div class = "child">
 13 is      <slot> </ slot>      // socket subassembly reserved space, provided by the parent component content         
14    </ div>
 15 <Template>
16  
. 17  // synthesized 
18<div class = "Father">   // parent component 
. 19    <div class = "Child">   // subassembly 
20 is      <div> tag contents </ div>    // replaces the slot 
21 is    </ div>
 22 is </ div>

The above content is the method of slot A subassembly headspace plurality of slots may be prepared:

// specified to be inserted in the slot 
<div slot = "slot1"> tag contents. 1 </ div> 
<div = slot "slot2,"> tag contents 2 </ div> // is named slot 
<slot = name "slot1,"> </ slot> 
<name = slot "slot2,"> </ slot>

slot-scope is relatively complex, which is used for data transfer, the sense of like props

To provide a scene description:

A teacher needs to do a survey analysis report (A: parent component, reported: display section)

He left a blank for students to do the B form and statistics (B: sub-components, form Statistics: Display section)

Requirements, the last line is left blank in the table, A write analysis conclusion (blank: slots, analysis Conclusion: The contents of the tag)

Meanwhile, A B also provides statistics to write conclusions (statistical results: data subcomponents returned)

// parent component 
<Template> 
  <div class = "Father">  　　　　　　　　// teacher A report 
    <Child>               　　　　　　  // Student B form 
        <div slot-scope = "the Response"> // teacher Conclusion A 
          statistical results: {{response. }} Data
         </ div> 
    </ child> 
  </ div> 
</ Template> // subassembly 
<Template> 
  <div class = "child">  　　　　　　　  // student table B 
     <slot: data = "result" > </ slot>    // A teacher conclusion 
  </ div> 
</ Template>

Interpretation; Sun imagine the slot assembly, the subassembly can transmit data to any component Sun

Here again one Sun components do not write props, because the slot behind all sub-components will be packaged into a data object to the components of Sun, Sun components with slot-scope for this whole object named

<div slot-scope="xxx">
{{xxx.info.name}}的学校是{{xxx.school.name}}
</div>

<slot :info="person" :school="school"></slot>