Understanding of Vue slots

1. Slot introduction

A slot is essentially an HTML template of a component. The display of the slot is determined by the parent component.
The core problem of the slot is: (1) whether to display or not; (2) how to display

The non-slot template in a component refers to the html template: div, span, ul, table, etc.; the display and hiding of the non-slot template and how to display is controlled by itself

The slot template is actually an empty shell, because its display and hiding and the final display of the HTML template are controlled by the parent component ; but the position of the slot display is determined by the child component itself , and where the slot is written in the child component template , Where will the template passed from the parent component be displayed in the future

Slot classification

• Single slot (also called anonymous slot or default slot)
• Named slot
• Scope slot

Two, a single slot

This kind of slot does not need to set the name attribute and can be placed in any position of the component. There can only be one "single slot" in a component

Parent component

The child component child is used in the parent component, and an html template is defined. The html template will be displayed in the anonymous slot position of the subcomponent

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>
</template>

Subassembly

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

The final rendering result is shown in the figure:

Three, named slots

The name attribute is added to the slot, which is a named slot. Named slots can appear N times in a component, with different positions. The following example is a component composed of two named slots and a single slot. These three slots are displayed by the parent component with the same set of css styles. The difference is that the content is slightly different.

Parent component

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
        <span>菜单-4</span>
        <span>菜单-5</span>
        <span>菜单-6</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
        <span>菜单->2</span>
        <span>菜单->3</span>
        <span>菜单->4</span>
        <span>菜单->5</span>
        <span>菜单->6</span>
      </div>
    </child>
  </div>
</template>

Subassembly

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

The display result is shown in the figure:

you can see that the parent component is associated with the named slot through the slot attribute on the html template. An html template without a slot attribute is associated with an anonymous slot by default

Four, scope slot

Scope slot requires data to be bound to the slot

<slot name="up" :data="data"></slot>
 export default {
    
    
    data: function(){
    
    
      return {
    
    
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}

As mentioned earlier, whether the slot is displayed at the end depends on whether the parent component has written a template under the child component, like the following

<child>
   html模板
</child>

Because the scope slot is bound to a set of data, the parent component can use it. So, the situation becomes like this: the style parent component has the final say, but the content can display the child component slot binding

The difference between the scope slot and the other two slots:

Single slot and named slot do not bind data, so the template provided by the parent component includes both style and data content ;

In the scope slot, the parent component only needs to provide a set of styles

Parent component

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{
    
    {
    
    item}}</span>
        </div>
      </template>
 
    </child>
 
    <!--第二次使用：用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{
    
    {
    
    item}}</li>
        </ul>
      </template>
 
    </child>
 
    <!--第三次使用：直接显示数据-->
    <child>
      <template slot-scope="user">
       {
    
    {
    
    user.data}}
      </template>
 
    </child>
 
    <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

Subassembly

<template>
  <div class="child">
 
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>
 
 export default {
    
    
    data: function(){
    
    
      return {
    
    
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

The result is shown in the figure below:

Five, other knowledge points

5.1 The difference between slots and slots

Slots are used to define slots. Slots are equivalent to the usage of refs. They are used to obtain the slots defined in the vue component to achieve content distribution.

5.2 slot-scope introduction

Slot-scope represents the data attributes bound to the sub-component

5.3 v-slot

The v-slot command is an alternative to slot and slot-scope

The format is as follows:

v-slot:title="nodeData"

v-slot: slot name = internal binding data of the sub-component (nodeData can be named arbitrarily)