When and where to use Vue's scoped slots

Author: Ashish Lahoti
Translator: Frontend Xiaozhi
Source: codingnconcept

thumbs look , micro-channel search [ big move in the world ] , B station concerned [ the front end of the small Chi ] this background there is no giant, but with an upward positive attitude of people. This article GitHub https://github.com/qq449245884/xiaozhi has been included, the article has been classified, and a lot of my documents and tutorial materials have been sorted out. **

Vue slots are an excellent way to inject content from parent components into child components.

Here is a basic example, if we do not provide any parent slot bit content, just the parent <slot> content will be content as a backup.

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

Then in our parent component:

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

After compilation, our DOM will look like the following.

<div> Override fallback content </div>

We can also put any data packet from the parent scope in the content of slot Therefore, if our component has a name , we can easily add it like this.

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

<script>
export default {
   data () {
     return {
       text: 'hello world',
     }
   }
}
</script>

Why do we need scoped slots

Let's look at another example, suppose we have a ArticleHeader component, data contains some article information.

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: 'title',
        description: 'description',
      },
    }
  },
}
</script>

Let's take a closer look at the slot , the backup content renders info.title .

Without changing the default fallback content, we can easily implement this component like this.

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

In the browser, title will be displayed.

Although we can quickly change the content of the slot by adding a template expression to the slot, what happens if we want to render info.description from the child component?

We imagine to do it in the following way:

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

However, after running in this way, an error will be reported: TypeError: Cannot read property ‘description’ of undefined .

This is because our parent component does not know what this info object is.

So how do we solve it?

Introduce scope slots

In short, the in-scope slot allows the contents of the slot in our parent component to access data found only in the child component. For example, we can use scoped slots to grant parent components access to info .

We need two steps to do this:

• Use v-bind make slot content available info
• v-slot in the parent scope to access slot attributes

First, in order to make info available to the parent object, we can info object as an attribute on the slot. These bounded properties are called slot props .

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

Then, in our parent component, we can use the <template> and v-slot instructions to access all slot props.

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
      </template>
    </child-component>
  </div>
</template>

Now, all our slot props, (in our example, only info ) will be provided as article object, and we can easily change our slot to display the content of description

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

The final effect is as follows:

to sum up

Although Vue scoped slots are a very simple concept-allowing slot contents to access sub-component data, which is useful in designing great components. By keeping the data in one location and binding it to other locations, it becomes clearer to manage the different states.

~End, I’m the wise man, I’m going to clean the dishes, my bones are white

---

possible bugs of the 1607cf9427d784 code after 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://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

communicate with

World" on WeChat to read and update as soon as possible (one or two earlier than the blog). This article has been included on GitHub 1607cf9427d7d5 https://github.com/qq449245884/xiaozhi I have sorted out a lot of my documents, welcome to Star and improve it. You can refer to the test site for review for interviews. In addition, pay attention to the account, and reply to 1607cf9427d7d7 welfare background, you can see the benefits, you know.