current position:Home>Dynamic components & slots & custom instructions for getting started with Vue Foundation

Dynamic components & slots & custom instructions for getting started with Vue Foundation

2022-04-29 18:25:18Big moon

author : Big moon
Share knowledge :vue Basic introduction
: Refuse to be rotten , Day day up

vue Basic introduction

Dynamic components

1. What are dynamic components

Dynamic component refers to dynamically switching the display and hiding of components .

2. How to implement dynamic component rendering

vue Provides a built-in Components , It is specially used to realize the rendering of dynamic components . The sample code is as follows : Insert picture description here

3. Use keep-alive Hold state

By default , The state of the component cannot be maintained when switching dynamic components . You can use vue Built in Components remain dynamic groups
The state of the piece . The sample code is as follows : Insert picture description here

4. keep-alive The corresponding life cycle function

When a component is cached , Will automatically trigger the of the component deactivated Life cycle function .
When the component is activated , Will automatically trigger the of the component activated Life cycle function . Insert picture description here

5. keep-alive Of include attribute

include Property to specify : Only components with matching names will be cached . Multiple component names are separated by English commas : Insert picture description here

slot

1. What is a slot

slot (Slot) yes vue Capabilities provided to the packager of the component . Allow developers to encapsulate components , Put the uncertain 、 What you want to specify by the user
Part is defined as slot . Insert picture description here
You can think of a slot as during component packaging , Placeholder for content reserved for users .

2. Experience the basic usage of slots

When packaging components , Can pass Element defines the slot , To reserve content placeholders for users . The sample code is as follows : Insert picture description here

2.1 Contents without reserved slots will be discarded

If no... Is reserved when packaging the component slot , Any custom content provided by the user will be discarded . The sample code is as follows : Insert picture description here

2.2 Back up content

When packaging components , Can be reserved for Slots provide backup content ( Default content ). If the user of the component does not provide any... For the slot
Content , Then the backup content will take effect . The sample code is as follows : Insert picture description here

3. A named slot

If multiple slot nodes need to be reserved when packaging components , You need to pay for each slot> Specify a specific slot name name . This slot with a specific name is called “ A named slot ”. The sample code is as follows : Insert picture description here

3.1 Provide content for named slots

When providing content to a named slot , We can do it in one template Use on element v-slot Instructions , And v-slot The form of the parameter of provides its name . The sample code is as follows : Insert picture description here

3.2 Abbreviated form of named slot

Follow v-on and v-bind equally ,v-slot There are also abbreviations , That is, all the contents before the parameter (v-slot:) Replace with characters #. for example v-slot:header Can be rewritten as #header: Insert picture description here

4. Scope slot

In the process of packaging components , Can be reserved for slot Slot binding props data , This carries props Data slot be called “ Scope slot ”. The sample code is as follows : Insert picture description here

4.1 Use the scope slot

have access to v-slot: In the form of , Receive the data provided by the scope slot . The sample code is as follows : Insert picture description here

4.2 Deconstruct slot Prop

The data object provided by the scope slot , Deconstruction assignment can be used to simplify the data receiving process . The sample code is as follows : Insert picture description here

Custom instruction

1. What is a custom instruction

vue The official provided v-text、v-for、v-model、v-if And so on . besides vue It also allows developers to customize instructions .

2. Classification of custom instructions

vue There are two types of custom instructions in , Namely :
Private custom directive
Global custom instructions

3. Private custom directive

At every vue In the component , Can be in directives Declare private user-defined instructions under the node . The sample code is as follows : Insert picture description here

4. Use custom instructions

When using custom directives , Need to add v- Prefix . The sample code is as follows : Insert picture description here

5. Dynamically bind parameter values for custom instructions

stay template When using custom directives in structures , You can use the equal sign (=) The way , Dynamically bind parameter values for the current instruction : Insert picture description here

6. adopt binding Get the parameter value of the instruction

When declaring custom directives , You can use the second parameter in the formal parameter , To receive the parameter value of the instruction : Insert picture description here

7. update function

bind The function only calls 1 Time : Called when the instruction is first bound to an element , When DOM update bind The function will not be triggered . update Letter
Every time DOM Called when updating . The sample code is as follows : Insert picture description here

8. Function shorthand

If insert and update The logic in the function is exactly the same , The custom instruction in object format can be abbreviated to function format : Insert picture description here

9. Global custom instructions

Custom instructions for global sharing need to pass “Vue.directive()” Make a statement , The sample code is as follows : Insert picture description here

copyright notice
author[Big moon],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291825152776.html

Random recommended