Slot, which is slot, is a component of HTML template, this template is not displayed, and how the display is determined by the parent component. In fact, a slot at the core of two issues here point out, that is not displayed and how to display .
Because the slot is a template, so, for any one component, from the perspective of the type of template points, in fact, it can be divided into non-template slots and slot template into two categories.
Non-slot template is an html template , such as 'div, span, ul, table ' these, non-template slots and hide and show how a display control by the component itself;
Slot template is a slot, it is an empty shell, because it's the last show and hide as well as what kind of html template display control by the parent component. But the position is determined by the slot display has its own sub-assemblies, slot written in what position the component template, the parent component pass over the future of the template is displayed in what position .
1 slot content
vue implements a set of content distribution api, the outlet slot bearer element as content distribution.
Slot can contain any template code, including html, and other components.
If you do not have a slot elements within the assembly, so anything that occurs between the components start and end tags abandoned.
2, compiled scopes
: Rules sub-template compilation of all content is in the sub-domain action; parent template of all content is the parent role in the domain compilation .
3, back-up content
Sometimes a slot set a specific reserve is (that is, the default) content is useful, it will only be rendered at the time did not provide content.
It is simply the concept of default values.<slot>Submit</slot>
4, named slots
If necessary a plurality of slots, slot element has a special property: name, is used to define an additional slot. A Without namethe <slot>export will be hidden with the name "default".
When providing content to a named slot, we can one <template>use the element of v-slotinstruction, and to v-slotprovide the name of the formal parameter:
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
Now <template>all the content elements will have to be passed in the appropriate slot. Not wrapped in with any v-slotof <template>be considered a default slot content in the content will be.
Note: v-slot can only be added in an <template>on (with one exception), it is with a slot obsolete properties
5. Scope slot
<current-user>
{{ user.firstName }}
</current-user>
The code will not work, because only <current-user>components can access to userand the content we provide is in the parent rendering. To make userslots available content in the parent, we can be useras <slot>binding a characteristic element up:
<span>
<slot v-bind:user="user"> {{ user.lastName }} </slot> </span>
Binding <slot>on the element characteristic is called slot prop . Now in the parent scope, we can give v-slotwith a value to define the name of the slot prop we offer:
<current-user>
<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
We chose to include all objects named slot propslotProps , but you can use any name you like.
(1) Exclusive Slot default abbreviations:
When the content is provided only when the default slot, label components can be used as a template slot. So that we can put v-slotdirectly on the component, which is said above exceptions
<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>
注意：只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法
（2）解构插槽：
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式，所以可以利用ES6的解构来传入参数
<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>
解构：v-slot="{ user }"
重命名：v-slot="{ user: person }"
定义默认值：v-slot="{ user = { firstName: 'Guest' } }"
6、动态插槽名
<template v-slot:[dynamicSlotName]> ... </template>
7、缩写
v-slot:header 可以被重写为 #header
8、其他示例
主要来自官网学习整理：https://cn.vuejs.org/v2/guide/components-slots.html