Vue-slot (slot)

Vue-slot (slot)

Official Documents

1. What is the slot slot?

The official definition is given:

Vue implements the API set of content distribution, this API design inspiration from the  draft specification Web Components , the  <slot>element as exit load distribution of content.

My own understanding is:
Vue slot like the same slot on the computer motherboard, when we do not produce all the components are fixed dead, but want it to have some flexibility, you can view the actual situation replacement, such as memory, graphics and so on, but they also need to interpolate the position condemnation.
Vue also true in the slot, in order to make the encapsulated component more flexible us, using the components, we can pass some data components to its respective position of the content to be displayed, the internal components can operate some of the data package.

2. slot of the basic usage

Basic usage:
First, there is a page About.vue, a component slot.vue , we want to use this component in the about page.
slot.vue:

<div>
  <h1>动物介绍</h1>
</div>

about.vue:

<div class="about">
  <h1>This is an about page</h1>
    <MySlot></MySlot>
</div>

display effect:

---

If we now, in MySlot label the content you want to add some

<div class="about">
  <h1>This is an about page</h1>
    <MySlot>这里有俩只动物</MySlot>
</div>

Display did not change

---

If you add in the component slot

<div>
        <h1>动物介绍</h1>
        <slot></slot>
    </div>

display effect

---

This will show up, no matter what we write, it will default to a slot in the display, which is the default slot .

3. Named Slot

If we want to write more than corresponding to a different location on the display, we used a named slot.
It should be noted that the need to use multiple slot Template
slot.vue:

<div>
  <h1>动物介绍</h1>
  <h3>
    // 名字为num
    <slot name="num"></slot>
  </h3>
  <div style="background-color: pink">
    // 名字为tip
    <slot name="tip"></slot>
  </div>
</div>

about.vue:

<div class="about">
        <h1>This is an about page</h1>
        <MySlot>
            <template #num>这里有2只</template>
            <template #tip>温馨提示！</template>
        </MySlot>
</div>

display effect:

---

Named slot is actually unpleasant.

4. Scope slot

The so-called scoping slot, my personal understanding is that, in the time slot is defined, you can bind some data for the slot, and the use of components in the parent page, we can get the data component corresponding to the slot binding.
In the assembly before a data binding.
slot.vue:

<div>
        <h1>动物介绍</h1>
        <h3>
            <slot name="num"></slot>
        </h3>
        <div style="background-color: pink">
            <slot name="tip"></slot>
        </div>
        <div style="background-color: deepskyblue">
            <slot name="detail">{{animal1.name}}----{{animal1.feature}}</slot>
        </div>
    </div>




//  data
    animal1: {
   name: '考拉',
   feature: '可爱'
 },
   animal2: {
   name: '鹦鹉',
   feature: '傻'
 }

display effect:

---

If we want when using components you want to display parrot internal components, we need to scope the slot.
First of all, we need to want to be exposed to the parent data binding to the slot
slot.vue:

<div>
        <h1>动物介绍</h1>
        <h3>
            <slot name="num"></slot>
        </h3>
        <div style="background-color: pink">
            <slot name="tip"></slot>
        </div>
        <div style="background-color: deepskyblue">
            <slot name="detail" :another="animal2">{{animal1.name}}----{{animal1.feature}}</slot>
        </div>
    </div>



//  data
 animal1: {
                name: '考拉',
                feature: '可爱'
            },
            animal2: {
                name: '鹦鹉',
                feature: '傻'
            }

Which animal2 data, Another is exposed to the external data alias. Note that you can expose multiple data (pieces of data binding).
about.vue:

<div class="about">
        <h1>This is an about page</h1>
        <MySlot>
            <template #num>这里有2只</template>
            <template #tip>温馨提示！</template>
            <template #detail="data">{{data.another.name}}-----{{data.another.feature}}</template>
        </MySlot>
    </div>

First, the parent page, using the component must first get to the slot where the external exposure data, because the data may be more than one, so get in the way he is to receive all the data exposed by an object, so this data is received by all data , another is to use specific data.
As a result, the data can get through, and this is the use of scopes slot.

5. Prop slot deconstruction

Top say, slot can begin to expose more than one data, so we accepted when an object is used, in conjunction ES6 syntax of the value of deconstruction, deconstruction can directly get data out of the data when needed, to form a plug deconstruction slot Prop.
Therefore, the upper slot scope example, about.vue may be modified as follows;
about.vue:

<div class="about">
        <h1>This is an about page</h1>
        <MySlot>
            <template #num>这里有2只</template>
            <template #tip>温馨提示！</template>
            <template #detail="{another}">{{another.name}}-----{{another.feature}}</template>
        </MySlot>
    </div>

These are the basic use Vue Slot, the more details you can refer to the official documentation.