Detailed explanation of vue3 slot usage

1 Introduction

Vue implements a set of content distribution APIs, using <slot>the element as an outlet to carry distributed content. The use of slots makes the design of Vue components more flexible.

In the Vue version change, although the usage syntax of slots has changed partially, the core usage of slots has not changed. Since vue2 will no longer be maintained in 2023, below we will focus on the specific use of slots by vue3. .

2 Slot usage

2.1 Basic use

When a slot exit API is declared in a child component, when the parent component uses the child component, it can choose to render the content of the parent component to the slot part of the child component, or it can choose not to render.

If the parent component does not provide slot content, it will not be rendered, and the child component will use its own default content for page rendering. Let's look at the following example:

Subassembly:SlotsComponent.vue

<template>
  <div class="red-text">
    <slot>
      子组件插槽
    </slot>
  </div>
</template>
<style scoped>
.red-text {
      
      
  color: red;
}
</style>

Parent component:index.vue

<template>
  <div>
    <label>父组件</label>
    <SlotComponent></SlotComponent>
  </div>
</template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
      
      
  components: {
      
      
    SlotComponent
  }
};
</script>

The rendering result is as follows:

We can see that the page is rendering the default content of the subcomponent at this time.

Looking at the situation where the parent component provides slot content, the child component code remains unchanged, and the parent component code is as follows:

<template>
  <div>
    <label>父组件</label>
    <SlotComponent>
      父组件使用子组件插槽
    </SlotComponent>
  </div>
</template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
      
      
  components: {
      
      
    SlotComponent
  }
};
</script>

The rendering result is as follows:

We can see that the child component's slot is partially replaced with the contents of the slot used by the parent component. The above is the basic use of the slot.

2.2 Named slots

Named slots, as the name suggests, are slots with names. In daily project development specifications, companies will require the use of named slots to facilitate the expansion of subsequent components and enhance the readability of the code.

Secondly, if we need to declare multiple slot outlets in a child component, we must also use named slots to distinguish the use of the parent component. Named slots use the slot nameattribute to name the slot and use it in the parent component v-slot:slotName. corresponding slot.

Let's take a look at the use of named slots:

Subassembly:SlotsComponent.vue

<template>
  <div class="red-text">
    <header>
      <slot name="header">
        <!-- 页面头部 -->
      </slot>
    </header>
    <main>
      <slot name="main">
        <!-- 页面内容 -->
      </slot>
    </main>
    <footer>
      <slot name="footer">
        <!-- 页面底部 -->
      </slot>
    </footer>
  </div>
</template>
<script>
export default {
      
      };
</script>
<style scoped>
.red-text {
      
      
  color: red;
}
</style>

Parent component:index.vue

<template>
  <div>
    <label>父组件</label>
    <SlotComponent>
      <template v-slot:header>
        我是头
      </template>
      <template v-slot:footer>
        我是底
      </template>
    </SlotComponent>
  </div>
</template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
      
      
  components: {
      
      
    SlotComponent
  }
};
</script>

The rendering result is as follows:

We can see the rendering result as above. Through this rendering result, we also know that if the child component declares a named slot, but the parent component uses it. will not be rendered on the page (unless there is a default value). In addition to the source, there are a few points to note:

1. If there are multiple slots, some of them have names and some of them have no names, the method of using the unnamed slots is the same as 2.1;
2. The syntax of vue3 has changed, and it must be used to use named slots <template v-slot:slotname>, which is different from the usage of some lower versions of vue.

2.3 Dynamic slot name

On the basis of named slots, the name of the dynamically controlled slot becomes a dynamic slot name. Using dynamic slots, we can dynamically render the content of the parent component into the child component slot interface.

How to use it:

Parent component:

<template>
  <div>
    <label>父组件</label>
    <SlotComponent>
      <template v-slot:[dynamicSlotName]>
        我是动态插槽
      </template>
      <template v-slot:footer>
        我是底
      </template>
    </SlotComponent>
  </div>
</template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
      
      
  components: {
      
      
    SlotComponent
  },
  data() {
      
      
    return {
      
      
      dynamicSlotName: "header"
    };
  }
};
</script>

The rendering result is as follows:

2.4 Slot value transfer

Normally, the slot content between parent and child can only directly access the properties of the parent component. When our parent component needs to use the slot property of the child component, we can use the slot value.

Examples are as follows:

Subassembly:SlotsComponent.vue

<template>
  <div class="red-text">
    <header>
      <slot :title="headerTitle" name="header">
        <!-- 页面头部 -->
      </slot>
    </header>
    <main>
      <slot name="main">
        <!-- 页面内容 -->
      </slot>
    </main>
    <footer>
      <slot name="footer">
        <!-- 页面底部 -->
      </slot>
    </footer>
  </div>
</template>
<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      headerTitle: "我是子组件slot变量"
    };
  }
};
</script>
<style scoped>
.red-text {
      
      
  color: red;
}
</style>

Parent component:index.vue

<template>
  <div>
    <label>父组件</label>
    <SlotComponent>
      <template v-slot:header="slotProps">
        {
   
   { slotProps.title }}
      </template>
      <template v-slot:footer>
        我是底
      </template>
    </SlotComponent>
  </div>
</template>
<script>
import SlotComponent from "./component/SlotsComponent";
export default {
      
      
  components: {
      
      
    SlotComponent
  },
  data() {
      
      
    return {
      
      
      dynamicSlotName: "header"
    };
  }
};
</script>

The rendering result is as follows:

Among them, the above code uses slots to pass values, v-slot:header="slotProps"and slotPropscan read headerall the properties named on the slot, such as titlethe properties we declare in the sub-component slot. Also using this method, multiple properties can be passed to the slot content of the parent component.

3 Summary

In order to let readers better understand slots and reduce learning costs, we use the same example to demonstrate the above content. The above code is the basic knowledge of slots, and it is a step-by-step process from 2.1 to 2.4.

The difficult things in the world must be done in the easy way, and the great things in the world must be done in the details. From the above methods of using slots, I hope everyone can understand and master the basic knowledge of slots, so that they can be integrated and applied in complex code environments. At the same time, if there is anything wrong with what I wrote or if you have any suggestions, everyone is welcome to study and discuss it together.