How to create multiple template slots using Vue named slots?

Author: Matt Maribojoc
Translator: Frontend Xiaozhi
Source: stackabuse

If you have dreams and dry goods, search for [Moving to the World] attention to this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Vue slots allow content from the parent component to be injected into the child component.

This is the most basic example. If we don’t provide any slot content of the <slot> in it will be the backing content.

// ChildComponent.vue
<template>
  <div>
     <slot> 后备内容 </slot>
  </div>
</template>

Your component code:

// ParentComponent.vue
<template>
   <child-component>
      替换 slot 的默认内容
   </child-component>
</template>

After compilation, our DOM will look like this

<div> 替换 slot 的默认内容 </div>

We can also write any data within the slot parent group in the 0609f1611967ad area. For example, the parent component has a title , we can use the following code to inject it into the child component:

// ParentComponent.vue

<template>
   <child-component>
      {{ title }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       title: '这会传递给子组件',
     }
   }
}
</script>

Why do we need to name the slot

There are two steps to using named slots in Vue:

1. Use the name attribute to name slot
2. Use the v-slot instruction to provide content from the parent component to these named slots

By default, when the slot is not given an explicit name attribute, it has a default name of default .

In order to give our slot name, the <slot> element has a special name attribute that allows us to distinguish between multiple slots.

In the following Article.vue , we name three slot

// Article.vue - Child Component
<template>
  <div>
    <slot name="title"> 默认 title </slot>
    <slot name="content"> 默认 content </slot>
    <slot name="comments"> 默认 comments</slot>
  </div>
</template>

Then, in the parent component, we can <template> use the elements v-slot instructions specify that we want to inject content slot .

// ParentComponent.vue
<template>
  <div>
    <child-component>
      <template> 我的 Title </template>
      <template> 我的 Content </template>
      <template> 我的 Comments </template>
    </child-component>
  </div>
</template>

Because the name of the slot is not specified, the default content of the slot is displayed.

To solve this problem, you can use v-slot , and the specified name must ensure that the name exactly matches the name declared in the subcomponent.

<template>
  <div>
    <child-component>
      <template v-slot:title> 我的 title </template>
      <template v-slot:content> 我的 content </template>
      <template v-slot:comments> 我的 comments </template>
    </child-component>
  </div>
</template>

Run again:

What is the point of using Vue to name slots

Naming slots allows us to use multiple slots, but why is this useful for us Vue developers.

In short, it allows us to better organize the development code, but also to write more extensible code.

Personally, I think the most important thing is that it allows us to use slots in the code, thus making style design easier. In our example, the Article.vue subcomponent has only three slots, but in actual applications, these slots look more like this so that our component can add CSS styles to each part.

<template>
  <div>
    <div class="title">
      <h1>
        <slot name="title"> 默认 Title </slot>
      </h1>
    </div>
    <div class="content">
      <p>
        <slot name="content"> 默认  Content </slot>
      </p>
    </div>
    <div class="comments">
      <slot name="comments"> 默认  Comments </slot>
    </div>
  </div>
</template>

In this example, it is easier to understand why we need multiple slot . Since the content we injected is separated from each other <div> , <p> It is not possible to pass all this information slot

If you check the DOM, you can see that the v-slot template is used to correctly insert the content in the correct position.

~End, I’m Shuwanzhi, I’m going to clean the dishes, see you next time!

---

possible bugs of 1609f161196a55 after code deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

original:
https://learn.co/2021/04/using-vue-named-slots-to-create-multile-template-slots/

communicate with

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line big factory interview complete test sites, materials and my series of articles.