Why use vue's scope slot? When to use?

This article will take you to learn more about the scope slot of vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Vue slots are a great way to inject content from a parent component into a child component. (Learning video sharing: vue video tutorial)

The following is a basic example. If we do not provide any slot content of the parent, just the parent The content in <slot></slot> will be used as backup content.

// 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 this.

<div> Override fallback content </div>

We can also wrap any data from the parent scope in slot content. So if our component has a data field called name, we can easily add it like this.

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

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

[Related recommendations: vue.js tutorial]

Why do we need scope slots

Let’s look at another example, assuming we There is an 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: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

Let’s take a closer look at the slot content. The backup content renders info.title.

We can easily implement this component like this without changing the default fallback content.

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

In the browser, title will be displayed.

While we can quickly change the contents of a slot by adding a template expression to the slot, if we want to render from a child component info.description, what will happen?

We imagine doing it in the following way:

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

However, an error will be reported after running like this: TypeError: Cannot read property 'description' of undefined.

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

So how should we solve it?

Introducing scoped slots

In short, scoped slots allow the slot content in our parent component to access data only found in child components. For example, we can use scoped slots to grant parent components access to info.

We need two steps to do this:

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

First, in order to enable info is available to the parent object, and we can bind the info object as a property 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 access all slot props using the <template> and v-slot directives.

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

Now, all our slot props, (in our example, just info) will be available as properties of the article object, and we can easily Simply change our slot to display the description content.

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

The final effect is as follows:

Summary

Although the Vue scope slot is a very simple The concept of making subcomponent data accessible to slot content can be useful in designing great components. By keeping data in one location and binding it to other locations, managing different states becomes clearer.

Original address: https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

Author: Ashish Lahoti

Translation address: https://segmentfault.com/a/1190000039801512

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Why use vue's scope slot? When to use?. For more information, please follow other related articles on the PHP Chinese website!