Original is not easy, I hope you can pay attention to us, and then easily point a praise ~~

This post was first published on the front end team blog of The Political Cloud: Make your components kaleidoscope, Vue Slot micro

(1) Preface

What is slot in Vue code? Simply put, slot. The

element acts as a content distribution slot in the component template, and the

element itself is replaced when the content is passed in.

If you don’t know what slot means, let’s see when you need it in Vue.

Example: for a presentation layer of a component, you need to keep the general structure fixed, but some of the internal structure is variable, and the style presentation is not fixed. For example, whether an icon is displayed in a Button, or changes in the middle content display area of a Modal box, etc. are not realized by child components themselves. The component does not support HTML DOM structure passing directly, so you can solve the problem by using slot as the HTML structure passing entry.

(2) V-slot usage

In version 2.6.0, Vue introduced a new uniform syntax (i.e., the < V-slot > directive) for named slots and scoped slots. It replaces slot and slot-scope, which are currently deprecated, not yet removed, and still in documentation.

The usage can be divided into three categories: default slot, named slot, and scoped slot.

◎ Default slot

Subcomponent authoring: Add a

element to the component to determine where to render.

<template> <div class="content"> <! <header class="text"> <! Slot backup: It is useful to set specific backup (default) content for a slot. When the parent component does not add any slot content, the default value of the backup content is rendered. --> <slot> Default </slot> </header> </div> </template>Copy the code

Parent component writing: Anything that is not wrapped in

// Parent <template> <div class="container"> <! -- Default slot --> <child> any content <template> content </template> middle content <! -- <template v-slot:default> </template> --> </child> <! <child V-slot ="slotProps"> <child V-slot ="slotProps"> <child V-slot ="slotProps"> </child> </div> </template>Copy the code

The renderings

◎ Named slot

If multiple slots are required, add the name attribute to the

element to distinguish different slots. If no name is specified, the default slot is default.

<template> <div class="content"> <! <main class="text"> <slot name="main"></slot> </main> <footer class="text"> <slot name="footer"></slot> </footer> </div> </template>Copy the code

Parent component:

// Parent <template> <div class="container"> <! <a href="https://www.zcygov.cn" target="_blank"> </a> </template> <template #footer> </template> <template #footer> <! </template> </child> </div> </template>Copy the code

The renderings

◎ Scope slot

Child component writing: Sometimes it is useful to give the parent component access to the data in the child component. We can call the features bound to

elements slot Prop, and of course we can pass some functions.

<template> <div class="content"> <! Footer class="text"> <slot name="footer" :user="user" :testClick="testClick"> {{user.name}} </slot> </footer> </div> </template> <script> export default { name: 'child', data () { return { user: { title: 'test title', name:' test name'}}; }, methods:{testClick(){// child general method, can be passed to the parent reuse alert('123'); }}}; </script>Copy the code

Parent component: a set object of bound properties. In the parent element, this object is received by v-slot: XXX =”slotProps” or # XXX =”slotProps”, XXX stands for the name of the named slot, and slotProps is the data object passed by the child component, which can be renamed.

// Parent <template> <div class="container"> <! -- Scope slot, <child> <template #footer="slotProps"> {{slotProps.user.title}} <button </button> </template> <template #footer="{user,testClick}"> {{user.title}}<br> This is for deconstructing slot prop<br> <! Common methods in child components, </button> </template> </child> </div> </template> <script> import child from './component/child.vue'; export default { name: 'demo', components: { Child }, }; </script>Copy the code

The renderings

◎ Other Extensions

  • Deconstructing slot prop can be renamed, for example:v-slot="{ user: person }"Rename the User object to Person.
  • Deconstructing slot prop can be assigned default values, such as:v-slot="{ user = { name: 'Guest' } }"Add custom fallback content to the property.
  • Dynamic slot naming, for example:v-slot:[dynamicSlotName]Supports named variable definitions.

◎ Precautions

  • V-slot can only be used with template, or it is written exclusively for the default slot.

  • When the parent component references the name of the v-slot repeatedly, only the contents of the last slot defined are loaded.

  • The exclusive default slot abbreviation syntax can be used only when the child component has only the default slot, and the full template-based syntax must be used whenever multiple slots are present.

(3) Slot and slot-scope

After introducing the basic usage of v-slot, we will also introduce the differences between slot and slot-scope.

◎ Sub-component writing

The subcomponents are written the same way, and here’s a collection, okay

<template> <div class="content"> <! - the default slot - > < header class = "text" > < slot > default < / slot > < header > <! - named slot - > < main class = "text" > < slot name = "main" > < / slot > < / main > <! Footer class="text"> <slot name="footer" :user="user" :testClick="testClick"> {{user.name}} </slot> </footer> </div> </template> <script> export default { name: 'child', data () { return { user: { title: 'test title', name:' test name'}}; }}; </script>Copy the code

◎ Parent component writing

  • Named slot: Uses the slot property directly, passing the value to the name property of the child component slot.

  • Scope slot: Accepts a set of properties passed in by a child component through the slot-scope property, otherwise the same.

// Parent <template> <div class="container"> <child> <! -- Default slot --> <div> Default slot </div> <! - named slot -- > < div slot = "main" > named slot < / div > < div slot = "main" > named slot 2 < / div > <! <div slot="footer" slot-scope="slotProps"> {{slotProps.user.title}} </div> </child> </div> </template> <script> import Child from './component/child.vue'; export default { name: 'demo', components: { Child }, }; </script>Copy the code

The final render

◎ Be careful

  • Unlike V-slot, the same name of a slot can be defined multiple times.

  • Slots can be defined directly on child components.

  • After V3.0, slot cannot be used. You are advised to use V-slot.

(4) Summary

  • The slot<slot>The reusable feature can be used to write some component structure fixed, content replaceable components, such as tables, lists, buttons, pop-ups and other content.
  • Slots can pass property values orfunction, you can write some general functions in the child component, such as general error message, etc., passed to the parent component reuse.

, recruiting

ZooTeam, a young passionate and creative front-end team, belongs to the PRODUCT R&D department of ZooTeam, based in picturesque Hangzhou. The team now has more than 50 front-end partners, with an average age of 27, and nearly 30% of them are full-stack engineers, no problem in the youth storm group. The members consist of “old” soldiers from Alibaba and netease, as well as fresh graduates from Zhejiang University, University of Science and Technology of China, Hangzhou Electric And other universities. In addition to daily business docking, the team also carried out technical exploration and practice in material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, promoted and implemented a series of internal technical products, and continued to explore the new boundary of front-end technology system.

If you want to change what’s been bothering you, you want to start bothering you. If you want to change, you’ve been told you need more ideas, but you don’t have a solution. If you want change, you have the power to make it happen, but you don’t need it. If you want to change what you want to accomplish, you need a team to support you, but you don’t have the position to lead people. If you want to change the pace, it will be “5 years and 3 years of experience”; If you want to change the original savvy is good, but there is always a layer of fuzzy window… If you believe in the power of believing, believing that ordinary people can achieve extraordinary things, believing that you can meet a better version of yourself. If you want to be a part of the process of growing a front end team with deep business understanding, sound technology systems, technology value creation, and impact spillover as your business takes off, I think we should talk. Any time, waiting for you to write something and send it to [email protected]

Recommended reading

Probably the most complete collection of text overflow truncation ellipsis schemes

Visual Construction System for Front-end Engineering Practice (PART 1)

Automated Web performance optimization analysis solution