Slot (slot)

1. What is the slot?

Carried by the parent component content into a location subcomponents. Vue slot is to achieve a set of api content distribution, content distribution through the slot label as an outlet.

Slot is not displayed and show what the parent component is determined by the slot where the display is determined by the subassembly.

effect:

So that the module block, more modular and reusable.

2, Usage:

Default slots:

Parent components:
 <Template> 
    <div> 
        <Children> 
            <INPUT: value = "value" V-Model = "value" /> 
        </ Children> 
    </ div> 
<Template> 
                
Data () { 
    return { 
        value: 123 
    }             
 } 


subcomponents:
 <Template> 
    <div> 
        <P> 5555 </ P> 
        <slot> default content </ slot> // this position will be <input: value = "value" v-model = "value" / > replace, if there is no input, the default content subcomponents is displayed.
    </ div> 
<Template>

Named Slot:

Subcomponents:
 <Template> 
  <div class = "slottwo"> 
    <div> slottwo </ div> 
    <slot name = "header"> </ slot> 
    <slot> </ slot> // name is not specified, the name is default 
    <slot name = "footer"> </ slot> 
  </ div> 
</ Template> 
parent component: <Template> 
  <div> 
    <slot-TWO> 
      <the p-> la la la, la la la, I was selling newspapers small expert </ the p-> 
      <Template slot = "header"> 
          <the p-> I am a name for the slot header of </ the p-> 
      </ Template> 
      <the p-slot = "footer"> I am a name for the footer of the slot </ P> 
    </ slot-TWO> 
  </ div>
</ Template> // parent components Template used (or may not write the template) to the write target value corresponding to the slot subassembly name, there is no slot with a value of default.

Scope slots:

Everything parent component template will compile the parent role in the region; all things sub-components within the template will be compiled in the child role.

Because the content of the slot is defined within parent components, if you want to obtain data of the subassembly, the subassembly can be received pass over the variable object slotProps by slot-scope.

Parent components:
 <div> 
    <TODO-List> 
      <- - slotProps variable subassembly for receiving objects passed over!> 
        <Span slot-scope = "slotProps" V- IF = "slotProps.todo.isComplete"> slotProps.todo.text} {} {</ span> 
    </ TODO-List> 
</ div> 
subcomponents: <UL> 
 < Li 
  V - for = "TODO in List" 
  : Key = "todo.id" 
 > 
  < ! - we are prepared for each todo a slot, -> 
  <-! `todo` will pass an object as a prop slot. -> 
  <slot: TODO = "TODO"> 
  </ slot> 
 </ Li> 
</ UL>

5, usage scenarios

 <el-dialog
      :visible.sync="dialog"
      width="400px"
      center>
      <template slot="title">
        <div class="alertTitle">
            <img src="../assets/admin.png">&nbsp; &nbsp;<span>编辑</span>
        </div>
      </template>
      <el-form class="inputBox" :model="editCont" label-width="100px">
        ...
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </span>
 </el-dialog>