<slot> slot when the component is generally used to fill in the contents of the tag is not being compiled, when it is desired to use the components when the parent is required to add the contents can fill in the definition of component <slot> </ slot> tag, the can give the default content in the slot when the parent will have no call to the default value when the content
Without a name of <slot> will exit with an implicit name "default".
Named Slot
In the template requires multiple slots, in order to distinguish the slot, use the name attribute, and then use the v-slot when the parent using components: header to distinguish which slot to add content, there is no corresponding last name is not sub-assemblies to the content corresponding to the name of the slot.
<template v-slot:header> <h1>Here might be a page title</h1> </template>
Scope slot
Parent template of all content is the role of the parent in the domain compiled; sub-template of all the contents are compiled in the sub-domain action .
So when you add content slots when using sub-assemblies in the parent template, you want to use subassemblies data data is not going to work, limit the scope of, when you want to access, you need subcomponents:
<span> <slot :user="user"> {{ user.lastName }} </slot> </span>
Is like most prop S pass component values, this is understood to be reversed,
Parent: Custom field slotProps object receives the pass over the slot prop
<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>
When only the default slot pass slot prop while another can not serve as a template label, the parent components directly to the v-slot: default = "slotProps " written on the application of sub-assemblies
If you do not want custom field receiving slot prop can be incorporated as needed deconstruction v-slot = "{user} "
Renaming can be given a default value (value undefined time ) V-slot = "{User: Person}" V-slot = "{{firstName = User: 'the Guest'}}"
Dynamic instruction parameters can also be used in the v-slot, dynamic slot name defined: This dynamic value is a parent element scopes
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template></base-layout>
With v-on and v-bind, like, v-slot there are abbreviations that put everything before the parameter (v-slot :) replaced by the character # . E.g. v-slot: header #header can be rewritten as :