This is the 7th day of my participation in the August Text Challenge.More challenges in August

What is a Vue slot

Slot is a very powerful function in Vue, but I didn’t understand it very clearly when I learned it before, and then I forgot it while learning. This blog post is about sorting out the contents of the learning slot.

So what is a slot?

The website explains:

Vue implements a content distribution API inspired by the draft Web Components specification that uses

elements as an outlet for hosting distribution content.

Doesn’t feel very easy to understand? it doesn’t matter

Second, comb out several problems

1. What is the function of a slot? Why slot functionality (what problem does it solve)?

Define two components, Index and Inner

// Index.vue

<template>
  <div class="hello">
    <Inner>
      <p>Want to insert the P tag into Inner</p>
    </Inner>
  </div>
</template>
Copy the code
// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <li><span>Item 02:</span>vue</li>
      <li><span>Item 03:</span>vue</li>
    </ul>
  </div>
</template>
Copy the code

Now what if we wanted to put something inside


?

The output is still inside the

component, and what is written inside the

tag does not take effect.

That’s what slots come in for.

We add slot
to the

component

For example, if you add between list items 01 and 02, you can see that the contents of the

tag have already been added to the

component, and that it happens to be between list items 01 and 02.

// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <slot></slot>
      <li><span>Item 02:</span>vue</li>
      <li><span>Item 03:</span>vue</li>
    </ul>
  </div>
</template>
Copy the code

By now, we know what slots are:

A slot is a set of content distribution apis implemented by Vue, with
elements as an outlet to host the distribution.

Simply put, we can define the content we need in the component tag and slot it into the component.

The
element inside the component acts as a portal, or slot, that provides access to and determines the location of content. The content defined in the component tag can be added to the component through this portal.

2. Where is the plug-in in the slot? Where is the slot?

This question was actually answered in the last question.

The “plug-in” in the slot is the content of the component label.

The “slot” in the slot is the
element in the component.

3. Why not<slot></slot>Element, the contents of the tag can’t be added, right?

If you think about it this way, the content in the component is arranged. If there is no
element, where should the content be placed? If not agreed, may disrupt the original arrangement of the content.

If the template of
does not contain a

element, anything between the component’s start tag and end tag is discarded.

The authors of Vue probably designed it this way, not rendering the contents of the component tag when there are no
elements.

If you’re designing it, you might as well make it default to render at the top of the content (although this might introduce other problems).

So this question is mainly said not too tangled, refer to the official documentation can be. (If there are really important considerations, you are welcome to raise them in the comments section.)

Three, slot classification

1. Default slot

The example above uses the default slot, through which everything in the component label is rendered uniformly. I won’t go into too much detail here.

2. Named slot

If you want to put different content in different places, the default slot seems inadequate. This is where the named slot comes in.

As the name suggests, a named slot is just a name for a slot.

Let’s give the plugins a name and the slots the same name, so we can match each other.

// Index.vue

<template>
  <div class="hello">
    <Inner>
      <template v-slot:apple><p>This is apple</p></template>
      <template v-slot:banana><p>This is a banana</p></template>
      <template v-slot:orange><p>This is the orange</p></template>
      <template ><p>This is the content for which no named slot is specified</p></template>
      <template ><p>This is also the one where no named slot is specified</p></template>
    </Inner>
  </div>
</template>
Copy the code
// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <slot name="apple"></slot>
      <li><span>Item 02:</span>vue</li>
      <slot name="banana"></slot>
      <li><span>Item 03:</span>vue</li>
      <slot name="orange"></slot>

      <br>
      <p>This is the default slot</p>
      <slot></slot>
      
      <br>
      <p>Here is the named slot named Default</p>
      <slot name="default"></slot>
    </ul>
  </div>
</template>
Copy the code

And here we can see

  1. Named slots can render corresponding content by name
  2. Content without a defined name is rendered uniformly by the default slot
  3. The default slot is actually a named slot, named default

3. Scope slot

A scoped slot was also a very difficult concept to understand before.

In a nutshell

Whereas content in a slot flows from the component label to the component, a scope slot flows the scope backwards, from within the component to the component label. You can access variables inside a component within the component tag.

Sometimes it is useful to give slot content access to data that is only available in child components.

Let’s start with demand

We tried to access Apple’s information in the slot contents and reported an error.

// Index.vue

<template>
  <div class="hello">
    <Inner>
      <template v-slot:apple><p>This is apple, {{apple.msg}}</p></template>
      <template ><p>This is the content for which no named slot is specified</p></template>
    </Inner>
  </div>
</template>
Copy the code
// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <slot name="apple"></slot>
      <li><span>Item 02:</span>vue</li>
      <li><span>Item 03:</span>vue</li>
      <slot></slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {},data() {
    return {
      apple: {msg: "It tastes very good.",}}; }};</script>
Copy the code

This is because of the compile scope

Everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope.

The data defined in

cannot be accessed in

.

This is where the scope slot comes in

We can bind the required data as an attribute of the

element

Attributes bound to

elements are called slot prop. Now in parent scope, we can define the name of our supplied slot prop using v-slot with a value:

// Index.vue

<template>
  <div class="hello">
    <Inner>
      <template v-slot:apple="slotProps"
        ><p>{{' this is apple, ${slotProps.apple. MSG}, ${slotProps. Price}, total ${slotProps.</p>
      </template>
      <template><p>This is the content for which no named slot is specified</p></template>
    </Inner>
  </div>
</template>

Copy the code
// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <slot name="apple" :apple="apple" :price="price" :weightCount="weightCount"></slot>
      <li><span>Item 02:</span>vue</li>
      <li><span>Item 03:</span>vue</li>
      <slot></slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {},
  data() {
    return {
      apple: {
        msg: "It tastes very good.",},price: "10 yuan/kg".weightCount: 1000}; }};</script>
Copy the code

Two key steps

  1. Data to be transmitted as<slot>Element is bound to an attribute called slot prop
<slot name="apple" :apple="apple" :price="price" :weightCount="weightCount"></slot>
Copy the code
  1. Within the component tag (parent scope), values can be usedv-slotTo obtain all slot prop, V-slot aggregates all slot prop into one object.
<template v-slot:apple="slotProps">
        <p>{{' this is apple, ${slotProps.apple. MSG}, ${slotProps. Price}, total ${slotProps.</p>
</template>
Copy the code

Here we define the slot prop object as slotProps (which you can customize), and then we can access the data inside the component using this object.

If you’ve ever used Element-UI, you know that’s where tables come from! That’s how tables work.

Other features of slots

For other features of slots, I suggest you consult the official documentation, which is very clear.

Backup the content
Exclusive default slot abbreviation syntax
Deconstructing slot Prop
Dynamic slot name
An abbreviation for named slot

Record small problems

1. Slot content style Question Whether the slot content style is the parent component or the child component

// Index.vue

<template>
  <div class="hello">
    <Inner>
      <p>Want to insert the P tag into Inner</p>
    </Inner>
  </div>
</template>
Copy the code
// Index.vue

p {
  color: #42b983;
}
Copy the code
// Inner.vue

<template>
  <div class="hello">
    <ul>
      <li><span>Item 01:</span>vue</li>
      <li><span>Item 02:</span>vue</li>
      <li><span>Item 03:</span>vue</li>
    </ul>
  </div>
</template>
Copy the code
// Inner.vue

p {
  color: #1e80ff;
}
Copy the code

The resources

Slot – Vue. Js

Vue slot details

Vue slot slot