I believe that friends who have experience in project development must know that there are often multiple places in the project that require the use of components with similar styles but slightly different details, such as the navigation bar and search bar. Components appear frequently, but in different scenarios we have different needs for the content of the navigation bar. It would be very troublesome to write a component specifically for this subtle difference, and the reusability would also be very low.

Some readers may think that this is not difficult to solve. For uncertainties in the child components, we can pass the props value of the parent component to solve them. For example, for the title in the navigation bar, we can It is implemented by passing the value to the parent component. (For example, Navigation Bar 1 and Navigation Bar 2 below)

Yes, when the components do not change much, this can indeed solve the problem of component reuse very conveniently. But what if I want to realize that according to different scenarios, the middle position of the navigation bar may be the title, or it may be a drop-down box, a search box, or other customized components? At this point it is difficult for us to expand the flexibility of our components simply through props. (For example, navigation bar 1 and navigation bar 3 below)

In a subcomponent, use the special element to open a slot for the subcomponent. What is inserted into this slot depends on how the parent component is used. We can take a look at the following case:

We used the child component twice in the Vue instance. The first time the parent component did not pass elements to the child component, and the second time the parent component did Pass elements to child components.

Judging from the results, when the parent component does not add elements to the child component slot, the default content in the slot will be displayed. If the parent component passes the slot content, the slot content will be overwritten. The default content of the slot is then displayed.

In the second section, we already know the basic use of slots, but when the functions of sub-components are more complex, we may have to define multiple slots in the component to meet more flexible requirements. business needs. For example, in the JD navigation bar example above, this component can be split into three slots, corresponding to the contents of the left, right, and middle positions.

But there is a prerequisite for reserving multiple slots in a component, that is, we must make each slot have its corresponding unique identifier, so that when the parent component delivers content, it can Identify which content corresponds to which slot.

We can take a look at the following case:

Three named slots are defined in the child component. We call the child component in the parent component. It should be noted that we do not The contents of the corresponding slot are not delivered completely in order. But in fact, we can find from the demonstration results that no matter what the order of the slot content passed by the parent component is, the incoming slot content will be correctly rendered according to the slot name during final parsing.

Before explaining the scope slot, we need to first understand the compilation scope. Specifically, everything in the parent component template will be compiled in the parent scope; everything in the child component template will be compiled in the child scope.

We can understand this rule through the following case:

Both the parent component and the child component use isShow to control the display of the component. At the same time, in the data of the parent and child components, there are A variable with the same name isShow. We can see from the results that whether the child component is defined in the parent component, whether its component is visible depends on the variable value in the parent component data.

The isShow flag defined in the subcomponent template is constrained by the subcomponent's own data variables, which means that the variables in the subcomponent template here take the variable value in the child scope.

In the demonstration in the previous section, we can already understand the concept of compilation scope, and also know that the parent component cannot directly use the data inside the child component (because the data inside the child component template is in the child component) within the scope of the component). But in some scenarios, we need the parent component to replace the slot label, but the content is provided by the child component. Well, at this time we can use scope slots to solve this problem.

We can take a look at the following case: there is an array in the subcomponent, and now we want to use slots to display the array according to different needs:

In the parent component, we defined 2 ways to display data, one is to display the data in list form, and the other is to split each language with --. In use, the sub-component needs to provide externally exposed data through the :data method at the slot. When using the parent component, first define the