Vue understands the slot and the use of its slot, slot scope and v-slot instructions

What is a slot

Vue itself implements a complete mechanism of content distribution, using elements as the outlet of content distribution, that is, slots. The template, HTML code and components in the slot will be rendered.

<!-- Example Definition of components -->
<h1>
  <slot></slot>
</h1>

<Child>
  <p>I am the content of the slot</p>
</Child>

If the component itself has no element as an exit, the content contained in the component will be discarded

<!-- Example Definition of components -->
<h1></h1>

<Child>
  <!-- Abandoned, not rendered -->
  <p>I am the content of the slot</p>
</Child>

default slot / anonymous slot

The above example does not explicitly declare the name attribute, which is the default slot, and its name attribute value is' default 'by default. If the slot name is not specified when data is passed into the slot, the default slot will be passed in

Named slot

A named slot is one with the name attribute. In many cases, you need to transfer content to multiple slots, and you need to use named slots.

Scope slot

Sometimes the parent component needs to access the scope in the slot. At this time, the scope object of the slot can be accessed through the scope slot (v-slot and slot scope), which is composed of the attribute values defined on the slot.

Slot default value (backup content)

<!-- Example Definition of components -->
<h1>
  <slot>I'm the default</slot>
</h1>

<!-- Will render as<h1>I'm the default</h1> -->
<Child>
</Child>

<!-- Will render as<h1><p>I'm new</p></h1> -->
<Child>
  <p>I'm new</p>
</Child>

Slot and slot scope (removed after version 3.0), you can view the Vue version through vue-V

Slot is used to bind the slot of incoming content, and slot scope gets the scope object of the slot

v-slot (added after version 2.6)

New instruction combining the above two instructions:

  • v-slot:slotName binds the incoming slot, abbreviated as #slotName, which is equivalent to slot = "slotName"
  • v-slot:slotName = "scope", get the scope object of the slot and assign it to scope, which is equivalent to slot scope = "scope". At the same time, you can use the deconstruction syntax of ES6 to obtain the specified feature v-slot = "{
    footer }"
  • When the slot is the default slot, v-slot can be used directly on the component without modifier, and the scope of the default slot is assigned to the variable declared by v-slot
  • The most important feature is that you can directly declare and obtain the scope object of the slot component on the component

Comparison between new and old instructions of slot scope and v-slot

1. Default text slot

<!-- Default text slot -->
<!-- old -->
<foo>
  <template slot-scope="{ msg }">
    {{ msg }}
  </template>
</foo>

<!-- new -->
<foo v-slot="{ msg }">
  {{ msg }}
</foo>

2. Default slot element

<!-- Default element slot -->
<!-- old -->
<foo>
  <div slot-scope="{ msg }">
    {{ msg }}
  </div>
</foo>

<!-- new -->
<foo v-slot="{ msg }">
  <div>
    {{ msg }}
  </div>
</foo>

3. Nesting default slots

<!-- Nested default slots -->
<!-- old -->
<foo>
  <bar slot-scope="foo">
    <baz slot-scope="bar">
      <template slot-scope="baz">
        {{ foo }} {{ bar }} {{ baz }}
      </template>
    </baz>
  </bar>
</foo>

<!-- new -->
<foo v-slot="foo">
  <bar v-slot="bar">
    <baz v-slot="baz">
      {{ foo }} {{ bar }} {{ baz }}
    </baz>
  </bar>
</foo>

4. Named slot

<!-- Named slot -->
<!-- old -->
<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: {{ msg }}
  </template>

  <div slot="two" slot-scope="{ msg }">
    element slot: {{ msg }}
  </div>
</foo>

<!-- new -->
<foo>
  <template v-slot:one="{ msg }">
    text slot: {{ msg }}
  </template>

  <template v-slot:two="{ msg }">
    <div>
      element slot: {{ msg }}
    </div>
  </template>
</foo>

5. Named and default mixed nested slots

<!-- Named and default mixed nested slots -->
<!-- old -->
<foo>
  <bar slot="one" slot-scope="one">
    <div slot-scope="bar">
      {{ one }} {{ bar }}
    </div>
  </bar>

  <bar slot="two" slot-scope="two">
    <div slot-scope="bar">
      {{ two }} {{ bar }}
    </div>
  </bar>
</foo>

<!-- new -->
<foo>
  <template v-slot:one="one">
    <bar v-slot="bar">
      <div>{{ one }} {{ bar }}</div>
    </bar>
  </template>

  <template v-slot:two="two">
    <bar v-slot="bar">
      <div>{{ two }} {{ bar }}</div>
    </bar>
  </template>
</foo>

Tags: Javascript Front-end Vue.js

Posted by damic on Tue, 17 May 2022 03:35:43 +0300