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.

What is slot

---

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)

Usage scenarios

---

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.

Classification

---

slots can be divided into the following three types:

• Default slot

• Named Slot

• Scope slot

Default slot

Subcomponents use the 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-slotThe attribute can only be used in &lt ;template>, but can be used on component tags when there is only a default slot

• The default slot name isdefault, which can be omitteddefaultWrite 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!