Home >Web Front-end >Front-end Q&A >When should vue use slot?
Usage scenarios: Slots allow users to expand components to better reuse components and customize them; if the parent component uses a reused component, Obtaining this component has a small number of changes in different places, and it would be unwise to rewrite the component. Pass content to the specified location inside the component through the slot to complete the application of this reusable component in different scenarios; such as layout components, table columns, drop-down selections, pop-up box display content, etc.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
The slot
element in HTML, as part of the Web Components
technology suite, It is a placeholder within the Web component
This placeholder can be filled in later using its own markup language
For example
<template id="element-details-template"> <slot name="element-name">Slot template</slot> </template> <element-details> <span slot="element-name">1</span> </element-details> <element-details> <span slot="element-name">2</span> </element-details>
template
will not be displayed on the page. You need to get its reference first and then add it to DOM
. The same is true for the concept of
customElements.define('element-details', class extends HTMLElement { constructor() { super(); const template = document .getElementById('element-details-template') .content; const shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(template.cloneNode(true)); } })
in Vue
Slot
The stage name slot, the flower name "occupies a hole", we can understand that the solt has occupied a position in the component template. When the component label is used, the content in the component label will automatically fill in the hole (replacing the component) slot position in the template), as an outlet for carrying distributed content
It can be compared to a card-type FC game console. The game console exposes the card slot (slot) for users to insert different game magnetic strips (auto Definition content)
Through slots, users can expand components to better reuse components and customize them.
If the parent component uses a reused component and obtains a small amount of changes in this component in different places, it is unwise to rewrite the component
Pass The slot transfers content to the specified location inside the component to complete the application of this reusable component in different scenarios
such as layout components, table columns, drop-down selections, pop-up box display content, etc.
slots can be divided into the following three types:
Default slot
Named Slot
Scope slot
Default slot
Subcomponents use the 58cb293b8600657fad49ec2c8d37b472 tag to determine the rendering position. The DOM structure can be placed in the tag. When the parent component is used without passing content to the slot, the DOM structure in the tag will be displayed on the page.
When using the parent component, just write the content directly in the tag of the child component
Child.vue
<template> <slot> <p>插槽后备的内容</p> </slot> </template>
Parent component
<Child> <div>默认插槽</div> </Child>
Named slot
The child component uses the name attribute to represent the name of the slot and is not passed as the default slot
When used in the parent component, it is used by default On the basis of the slot, the slot attribute is added, and the value is the value of the sub-component slot name attribute
Child.vue
<template> <slot>插槽后备的内容</slot> <slot name="content">插槽后备的内容</slot> </template>
Parent component
<child> <template v-slot:default>具名插槽</template> <!-- 具名插槽⽤插槽名做参数 --> <template v-slot:content>内容...</template> </child>
Scope Slot
The subcomponent binds properties on the scope to pass the subcomponent information to the parent component. These properties will be hung in the v-slot of the parent component. On the accepted object
in the parent component, use v-slot: (abbreviation: #) to obtain the information of the child component, and use
child component Child.vue
in the content.<template> <slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> </template>
Parent component
<child> <!-- 把v-slot的值指定为作⽤域上下⽂对象 --> <template v-slot:default="slotProps"> 来⾃⼦组件数据:{{slotProps.testProps}} </template> <template #default="slotProps"> 来⾃⼦组件数据:{{slotProps.testProps}} </template> </child>
Summary:
v-slot
The attribute can only be used in < ;template>
, but can be used on component tags when there is only a default slot
The default slot name isdefault
, which can be omitteddefault
Write directlyv-slot
When the abbreviation is #, you cannot leave out the parameters and write #default
can be obtained through deconstruction v-slot={user}
, and can also be renamed v-slot="{user: newName}"
and defined Default valuev-slot="{user = 'Default value'}"
Related recommendations: vue.js video tutorial
The above is the detailed content of When should vue use slot?. For more information, please follow other related articles on the PHP Chinese website!