Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "Vue.js components in the slot and related dynamic components, asynchronous components example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "Vue.js components in the slot and related dynamic components, asynchronous components example analysis" this article.

Slot (Slot)

Define a child component, and add content to this child component should be defined in the template of the child component, and the content defined directly in the tag of the parent component will not be rendered.

By adding a placeholder to the child component, you can render the content in the child component tag of the parent component.

Slot content

Any template code

HTML code

Other components

Slots can have default content to display when no content is provided in the parent component.

Submit1. ⬇️ Submit2. Save ⬇️ Save

Scope

Everything in the parent template is compiled in the parent scope; everything in the child template is compiled in the child scope.

Named slot

Imagine that we have a component with the following template

As you can see, the content displayed in the component is divided into different parts, so you need to use a unique attribute of the element: name. This feature can be used to define additional slots.

An exit without name will have the implied name "default".

When providing content to a named slot, we can use the v-slot directive on an element and provide its name as an argument to v-slot:

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

Now everything in the element will be passed into the appropriate slot. Any content that is not wrapped in a v-slot will be considered the content of the default slot.

Of course, you can also wrap the contents of the default slot in v-slot:default.

V-slot can only be added on one

Scope slot

When we want to enable the slot content to access the data that is unique to the subcomponent, we can bind the data as a feature of an element

{{user.name}}

The feature that is bound to the element is called slot prop. At this point we define the name of the slot prop we provided by taking a value to the v-slot in the parent component.

{{slotProps.user.age}}

Acronym syntax for exclusive default slots

The above writing can be simplified when the content provided has only the default slot.

{{slotProps.user.firstName}} {{slotProps.user.firstName}}

There are two points to note:

Simplified writing cannot be mixed with named slots, and the scope is not clear.

When there are multiple slots, all slots use a full syntax-based

Deconstructing slot Prop

The inner workings of scope slots are to include the contents of your slots in a function that passes in a single parameter:

Function (slotProps) {/ / slot content}

This means that the value of v-slot can actually be any JavaScript expression that can be used as a parameter in a function definition. So in a supported environment (single file component or modern browser), you can also use ES2015 deconstruction to pass in a specific slot prop, as follows:

{{slotProps.user.firstName}} ⬇️ {{user.firstName}}

Examples of using scenarios

Slot prop allows us to convert slots into reusable templates that can render different content based on the input prop.

This is most useful when designing reusable components that encapsulate data logic while allowing parent components to customize partial layouts.

Dynamic slot name

Dynamic instruction parameters can also be used on v-slot to define dynamic slot names.

...

Named slot abbreviation

V-slot can be abbreviated to #.

Abbreviations can only be used when there are parameters.

{{user.firstName}} {{user.firstName}}

Dynamic component & keep-alive

When switching between these components, you sometimes want to keep them in their state to avoid performance problems caused by repeated renderings. To solve this problem, we can wrap the dynamic component with an element

Note that the component to which this requirement is switched has its own name, whether through the component's name option or local / global registration.

Explain in more detail what we encounter in the course of actual combat later, and then give a special explanation.

Asynchronous component

In the actual project process, we often divide a series of functions into small code blocks, hoping to load them only when needed. To do this, Vue allows us to define our component as a factory function that parses the component definition asynchronously.

Vue triggers this factory function only when the component needs to render, and caches the results for later use.

Vue.component ('async-example', function (resolve, reject) {setTimeout (function () {/ / pass component definition resolve ({template:' I am async'})}, 1000)})

In fact, this process is similar to designing an asynchronous function where the factory function receives a resolve callback that is called when we get the component definition from the server, or we can call reject (reason) when the load fails.

One recommended practice is to use asynchronous components in conjunction with webpack's code-splitting function

Vue.component ('async-webpack-example', function (resolve) {/ / this special `build` syntax will tell webpack / / automatically cut your build code into multiple packages, these packages / / will load require (['. / my-async-component'], resolve)} via Ajax request)

Similarly, you can return a Promise in the factory function

Vue.component ('async-webpack-example', / / this `import` function returns a `Promise` object. () = > import ('. / my-async-component')

Deal with loading statu

The above factory function can return an object in the following format

Const AsyncComponent = () = > ({/ / the component to be loaded (which should be a `Promise` object) component: import ('. / MyComponent.vue'), / / the component used when the asynchronous component is loaded is loading: LoadingComponent, / / the component used when loading fails, error: ErrorComponent, / / shows the delay time of the component when loading. The default value is 200 (milliseconds) delay: 200, / / if a timeout is provided and the component has timed out, / / the component that was used when the load failed. The default value is: `Infinity` timeout: 3000}) the above are all the contents of this article entitled "sample Analysis of slots and related dynamic and Asynchronous components in Vue.js components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.