22. VUE slot - Detailed

Slot

Has been on the slots do not understand, learn today, and sort out the hope that the future can be applied flexibly.

(A) the contents of the slot

First come simple example, look at the role of rent slot.

1.1 does not use the slots

Parent components:

  < Div ID = "App" > 
      < h1 of > which is the parent components: MSG {{}} </ h1 of > 
      < Child-Component > Hello </ Child-Component > 
  </ div >

Sub-components:

 < Div > 
        < H2 > This is a sub-assembly, the Component-Child </ H2 > 
  </ div >

result:

 

 in conclusion:

References the parent component subassembly, the subassembly written: As (or Hello HTML), will be shown.

1.2 Slot

Parent components:

  <div ID = "App"> 
      <h1 of> which is the parent components: MSG {{}} </ h1 of> 
      <Child-Component> Hello </ Child-Component> 
  </ div>

Sub-components:

<div> 
        <H2> This is a sub-assembly, the Component-Child </ H2> 
        <slot> </ slot> 
  </ div>

result:

 

 in conclusion:

Vue implements the API set of content distribution, this API design inspiration from the  draft specification Web Components , the  <slot>element as exit load distribution of content. When the component rendering time, <slot></slot> it will be replaced with "Hello." Slot can contain any template code, including HTML

1.3 contains html

Parent component:

  < Div ID = "App" > 
      < h1 of > which is the parent components: MSG {{}} </ h1 of > 
      < Child-Component > 
          < span > slot Test </ span > 
      </ Child-Component > 
  </ div >

 

1.4 If there is no sub-assembly <slot>

If none of the sub-assembly <slot>, then the reference when the sub-assembly within parent components, the content will be abandoned at any subassembly between the start tag and end tag.

 

(Ii) back-up content

Backup content, that is, for the time slot is not set anything, the default display of content.

Parent component:

There is no content for the slot

  < Div ID = "App" > 
      < h1 of > which is the parent components: MSG {{}} </ h1 of > 
      < Child-Component > </ Child-Component > 
  </ div >

Subassembly:

In sub-assemblies, adding back-up content

   < Div > 
        < H2 > This is a sub-assembly, the Component-Child </ H2 > 
        < slot > 
            < span > This is the fallback content </ span > 
        </ slot > 
    </ div >

result:

 

 

But if you set the slot, back-up content is not displayed.

 

 (Iii) named slots

Sometimes, we need more slots, such as:

Sons parts:

  < Div ID = "App" > 
      < h1 of style = "text-align = left: Center" > This is the parent components: {{MSG}} </ h1 of > 
      < Child-Component > 
          < Template V-slot: header > 
              < H3 style = "text-align = left: Center; Color: Blue" > this is header part </ H3 > 
          </ Template > 
          < P style = "Color: BlueViolet; text-align = left: Center" > this is the subject matter of the </ P > 
          <template v-slot:fooder>
              <h3 style="text-align: center;color: aqua">这是fooder部分</h3>
          </template>
      </child-component>
  </div>

Subassembly:

   <div>
        <h2 style="text-align: center">这是子组件，Child-Component</h2>
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>

(D) the scope of slots

Parent socket assembly, the subassembly can take data.

Parent component:

Feature on the additional element is referred to as v-slot socket prop

   < Div the above mentioned id = "App" > 
        < h2 > This is the parent component! </ H2 > 
        < Child-slot > 
            < Template V-slot: default = "User" > 
               < P > parent components, taking subassembly values: {{}} user.user.lastName </ P > 
            </ Template > 
        </ Child-slot > 
    </ div >

Subassembly:

In <slot>, the binding data v-bind: user = "user"

  <div>
        <h2>这是子组件</h2>
        <span>FirstName:{{user.firstName}},LastName:{{user.lastName}}</span>
        <slot v-bind:user="user">{{user.lastName}}</slot>
    </div>

result:

 

 (E) the abbreviated syntax exclusive default slots

When the sub-assembly, only the default slot, label components can be used as a template slot. So that we can put  v-slot directly on the components:

< Child-slot > 
            < Template V-slot: default = "User" > 
               < P > parent components, taking subassembly values: {{}} user.user.lastName </ P > 
            </ Template > 
  </ slot-Child >

It can also be abbreviated as:

< Child-slot > 
            < Template V-slot = "User" > 
               < P > parent components, taking subassembly values: {{}} user.user.lastName </ P > 
            </ Template > 
</ Child- slot >