How to use v-slot named slot in Vue

Vue is a popular JavaScript framework, especially popular when building front-end single-page applications. Vue provides various built-in functions and APIs, one of which is using v-slot named slots. In this article, we will understand the concept of v-slot named slots and explain how to use them by providing practical examples.

What is v-slot named slot?

v-slot The named slot is a more flexible and powerful slot mechanism in Vue. The basic concept is to provide a component with an extra insertion point (i.e. a slot) so that you can insert your own content inside the component. v-slot Named slots allow you to give slots names so that they can be referenced inside component templates.

In Vue 2.x, use the v-slot directive to define the slot content and pass it to the child component when the parent component runs. In Vue 3.x, the v-slot directive was renamed #, but the syntax remains the same.

Using v-slot named slots

Let us demonstrate how to use v-slot named slots through a practical example.

We will create a TodoList component that will display to-do items. Using v-slot named slots, we create two slots - one to display the content of a single item in the to-do list, and another to display the content after the end of the list.

The following is a sample code for the TodoList component template:

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
    <slot name="after"></slot>
  </div>
</template>

In the above code, we use the v-for directive to loop through the items array, and then use the slot directive to dynamically move the v-for elements Insert into the "item" slot. Similarly, we define a slot named "after" at the end of the list to display the content after the end of the list.

Now, let’s look at an example using the TodoList component. The following is the sample code of the parent component template:

<template>
  <div>
    <todo-list :title="title" :items="items">
      <template v-slot:item="props">
        <li>{{ props.item }}</li>
      </template>
      <template v-slot:after>
        <p>List ended.</p>
      </template>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList,
  },
  data() {
    return {
      title: 'My Todo List',
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

In the above code, we first import the TodoList component through the import directive. We then use the todo-list element in the parent component template and pass the data to the TodoList component via the v-bind directive. Finally, we use named slots to insert custom item and end content into the TodoList component.

Summary

In this article, we learned the concept and usage of v-slot named slots in Vue. With v-slot named slots, we can have better control over component content and create reusable components in a more flexible and powerful way. When using v-slot named slots in real projects, give the slots meaningful names to make the code more readable and easier to maintain.

The above is the detailed content of How to use v-slot named slot in Vue. For more information, please follow other related articles on the PHP Chinese website!