Understanding and use of slots in Vue development

Author: Jingteng FE, from Jingteng Network. It is a development team focused on web front-end, and has accumulated many years of experience in solving difficult problems in the field of web front-end. Advocating high efficiency, high quality, growth, freedom and happiness.

Source: Hang Seng LIGHT Cloud Community

1. Definition

The slot in vue refers to the reserved position <slot></slot>defined The label has a name attribute, and the user can set it according to the actual situation, or not set it. Slots with the name attribute set are called [named slots], and those without the name attribute are called [unnamed slots]. When using a child component in a parent component, you can write html code to the named slot or unnamed slot in the child component by declaring the slot name or not declaring the slot name through v-slot in the child component tag .

The feature of slot usage is that code can be written into the child component when the child component label is used in the parent component.

2. Use steps

1. <slot>Define slots with labels in subcomponents
2. When using a child component in a parent component, use v-slot to write html code in the child component tag.
3. v-slot is <template>used with labels

3. Slot usage scenarios

Such a scenario: a parent component, a child component.

parent component

<template>
  <div class="slot-content">
    <Student v-slot:default>wangxiaoer</Student>
  </div>
</template>

Subassembly

<template>
  <div>
    <span>name: </span>
  </div>
</template>

Here, the parent component wants to insert the name directly in the label. But it backfired. Through browser rendering, we found that the "wangxiaoer" field was not displayed. As shown in Figure 3.1 below. If we want to write code in the parent component and successfully render in the child component, we can use slots to help us achieve that.

(Figure 3.1)

4. How to use the slot

We modify the code of the above subcomponents

<template>
  <div>
    <span>name: </span>
    <slot></slot>
  </div>
</template>

The code of the parent component remains unchanged. At this time, we found that the browser appears to insert "wangxiaoer" into the component from the parent component. Figure 4.1

(Figure 4.1)

Combining the definitions, we will find that we are using unnamed slots in this scenario. So how to use named slots? We continue to modify the above code

The subcomponent is modified as follows

<template>
  <div>
    <div>
      <span>name: </span>
      <slot></slot>
    </div>
    <div>
      <span>age：</span>
      <slot name="age-slot"></slot>
    </div>
  </div>
</template>

The parent component is transformed as follows

<template>
  <div class="slot-content">
    <Student v-slot:default>wangxiaoer</Student>
    <Student>
      <template v-slot:default>
        wangdagang
      </template>
      <template v-slot:age-slot>
         18岁
      </template>
    </Student>
  </div>
</template>

The effect is as shown in Figure 4.2.

(Figure 4.2)

It can be seen that v-slot: default refers to an unnamed slot. When we assign a normal string to v-slot, this string is the name of the slot.

5. Scope slot

The scope slot is described in the official website as follows: All content of the parent component template will be compiled in the parent scope. Simply put, it is the data data in the parent component that cannot be directly defined by the child component. The emergence of scope is to solve such a problem.

Instructions:

After the v-slot declaration, use = to connect the scoped slot to complete the declaration of the scoped slot, example (v-slot:defaule="scope")

There is such a scenario: a child component, a parent component

parent component

<template>
  <div>
    <Teacher>
      <template
        v-slot:teacher-info>
        <div v-for="item in list">
          父组件传入的内容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </Teacher>
  </div>
</template>

Subassembly

<template>
  <div>
    这是子组件
    <slot name="teacher-info"></slot>
  </div>
</template>

<script>
  export default {
    name: 'SlotScope',
    components: {},
    data () {
      return {
        list: [{
          name: 'zhangyue',
          age: '18'
        }, {
          name: 'liuyue',
          age: '20'
        }, {
          name: 'zhaoyue',
          age: '22'
        }]
      };
    },
    methods: {}
  }
</script>

From the code logic, it is obvious that the scene is that the parent component uses the list in the child component for processing when rendering the child component. But according to the browser rendering results, it failed. Figure 5.1

(Figure 5.1)

To achieve the requirements of the above scenario, you can use scope to achieve the requirements. The code modification is as follows

The parent component code is modified as follows

<template>
  <div>
    <Teacher>
      <template
        v-slot:teacher-info="scope">
        <div v-for="item in scope.list">
          父组件传入的内容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </Teacher>
  </div>
</template>

At this point, you can see that the browser has successfully rendered the effect we want to achieve. Figure 5.2

(Figure 5.2)

{{o.name}}

{{m.name}}