Detailed explanation of slot function in Vue3: using slots to implement more flexible component applications

In Vue3, using slots can achieve more flexible component applications. This article will introduce in detail the application of the slot function in Vue3.

1. Understanding slots

In Vue, slot is a special tag. Its function is similar to a template in HTML and can be used to insert components. Slots in Vue3 are far more advanced than Vue2, providing more flexible usage.

2. Use the default slot

In Vue3, we can use the default slot in the component template. The default slot means that if a component scene contains an uncertain number of child nodes, these child nodes can be placed in the component tag and finally rendered. This is as simple as using default slots like slots in Vue2.

For example, we can define a component named HelloWorld, and the component template contains a default slot:

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

This component will render an h1 tag and a default slot.

When using this component, we can pass data as follows:

<template>
  <HelloWorld title="Welcome to my page">
    This is my website.
  </HelloWorld>
</template>

The HTML code that will be rendered is:

<div class="hello">
  <h1>Welcome to my page</h1>
  <slot>This is my website.</slot>
</div>

As you can see, we are When using the component, you pass "This is my website." to the default slot, and the component puts it in the template.

3. Use named slots

In some cases, we need to use multiple slots. This functionality is also provided in Vue3. A named slot is to add a name attribute to the slot tag to define a name for the slot. For example:

<template>
  <div class="todo-list">
    <h3>任务清单</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <slot name="task" :task="task"></slot>
      </li>
    </ul>
  </div>
</template>

In this component, we define a named slot named "task" and pass a parameter task. When using this component, we can use the v-slot directive in the tag to match the named slot:

<template>
  <TodoList>
    <template #task="{ task }">
      <span>{{ task.name }}</span>
      <button v-if="task.isComplete" @click="task.isComplete = false">完成</button>
      <button v-else @click="task.isComplete = true">未完成</button>
    </template>
  </TodoList>
</template>

In the above example, we used the template tag and the v-slot directive to specify what to use The slot name is "task". Here a task name is specified, and then the v-if and v-else instructions are used to determine whether the task has been completed.

4. Use scope slots

In Vue3, in addition to named slots, it also provides the function of scope slots. Scope slots use parameters in named slots to not only pass data, but also to render more complex templates.

For example, we have a list component, and each list item needs to render a button to delete itself. Such components can be implemented using vue.js's scoped slots.

<template>
  <ul>
    <slot v-for="item in items" :item="item" v-bind="item"></slot>
  </ul>
</template>

In this component, we use a scope slot named "default" to traverse each item in the items array and pass them out so that sub-components can access the items. details.

When using this component, you need to use the template and v-slot directives in the tag to match the scope slot:

<template>
  <List :items="todos">
    <template #default="props">
      <li>
        <input type="checkbox" v-model="props.item.isDone" />
        <span :class="{ done: props.item.isDone }">{{ props.item.text }}</span>
        <button @click="remove(props.item)">x</button>
      </li>
    </template>
  </List>
</template>

In this example, we use "#" Scope slots are defined and data is accessed through props.

Summary

Vue3’s slot function provides a variety of flexible usages to help us implement more complex components. We can use default slots to insert content through templates; use named slots to pass multiple slots; use scope slots to pass complex templates and data. Through these functions, we can write more flexible components and improve code reuse and readability.

The above is the detailed content of Detailed explanation of slot function in Vue3: using slots to implement more flexible component applications. For more information, please follow other related articles on the PHP Chinese website!