May 30, 2021 Article blog
The documentation on slots in
vue
is very short, the language is very condensed, coupled with its and
methods
data
computed
and other commonly used options use frequency, use of the difference in order, which may cause the first contact with the slot developers easy to produce "forget it, go back to learn, anyway can write the basic components", so closed the vue documentation.
In fact, the concept of slots is very simple, the following is divided into three parts. This section is also written in the order in which the vue documentation is written.
Before entering the three parts, let the students who have not touched the slot have a simple concept of what a slot is: slot, is an HTML template of a component, this template display does not appear, and how to display is determined by the parent component. In fact, two of the most central questions of a slot are pointed out here, which is to show what is not displayed and how it is displayed.
Because slots are a template, for any one component, from the perspective of the type of template, can actually be divided into non-slot templates and slot templates two categories. A
non-slot template refers to an html template, which refers to
div
span
ul
table
the display and hiding of a non-slot template, and how it is displayed under the control of the plug-in itself;
However, the location of the slot display is determined by the child component itself, where slot is written in the component template, and where the template passed by the parent component will be displayed in the future.
The first is a single slot, which is the official name of vue, but can actually be called the default slot, or as a relative to a named slot, we can call it an anonymous slot. Because it doesn't have to set the name property.
A single slot can be placed anywhere in a component, but just like its name, there can only be one such slot in a component. Correspondingly, there can be many name slots, as long as the name property is different.
Here's an example.
Parent component:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
</child>
</div>
</template>
Subcommuties:
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
In this example, because the parent component wrote
the html
template in the <child ></child >, the child component's
anonymous slot
This template is like this.
That is, the anonymous slot of the subcompit is used and is used by the template below.
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
The final rendering results are shown in the figure:
Note: All demos are styled for easy observation.
The parent components are filled with a gray background and the child components are filled in light blue.
The anonymous slot does not have the name property, so it is an anonymous slot, so when the slot adds the name property, it becomes a named slot. A named slot can appear N times in a component. a ppears in different locations. The following example is a component with two named slots and a single slot, which are displayed by the parent component in the same css style, except that there is a slight difference in content.
Parent component:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
<span>菜单-4</span>
<span>菜单-5</span>
<span>菜单-6</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
<span>菜单->3</span>
<span>菜单->4</span>
<span>菜单->5</span>
<span>菜单->6</span>
</div>
</child>
</div>
</template>
Subcommuties:
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
The results are shown as follows:
As you can see, the parent component associates a named slot with the slot property on the html template. Html templates without slot properties associate anonymous slots by default.
Finally, it's our scope slot. T his is a little difficult to understand. O fficially it's called a scope slot, and in fact, compared to the first two slots, we can call it a slot with data. What do you mean, the first two are written in the template of the component
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
However, scope slots require that data be bound on top of slot.
That's what you have to write about.
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
As we said earlier, the last thing the slot shows is to see if the parent component has written a template under child, as it does below.
<child>
html模板
</child>
Write, the slot always have to show something on the browser, something is html should have the appearance, did not write, slot is empty shell, nothing. OK, we say that there is an html template situation, that is, the parent component will insert the template into the child component situation, then what kind of style, this is determined by the parent component's html-css, but what is the content of this set of styles?
Because the scope slot binds a set of data, the parent component can be used. This becomes the case: the style parent component is in the right place, but the content can show the child component slot binding.
Let's compare the difference between a scope slot and a single slot and a named slot, because a single slot and a named slot do not bind data, so the parent component is provided with a template that includes both styles by including content, in the example above, you see the text, "menu 1", "menu 2" are all provided by the parent component itself;
As you can see in the following example, the parent component provides three styles (flex, ul, direct display), none of which provides data, using an array of names that the child component slots themselves bind to.
Parent component:
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用:用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用:直接显示数据-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
Subcommuties:
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
The results are shown in the figure:
Recommended good lessons: Vue project practice, Vue2.x micro-class