slot

Function: enables the parent component to insert html structure into the specified location of the child component. It is also a way of communication between components. It is applicable to parent component = > child component

Default slot

App.vue

    <Category>
      <img src="" alt="">
    </Category>

img inserted into Category

Category.vue

<template>
  <div class="category">
      <h3>classification</h3>
        <slot>When no value is inserted, the</slot>
  </div>
</template>

Then the img picture will replace the < slot > < / slot > of Category.vue

When no content is inserted in < category > < / category >, the content of < slot > < / slot > in Category.vue will appear

Named slot

At this time, we have two pictures. We want to put the picture at the head and tail of Category.vue

<Category>
  <img src="" alt="">
  <img scr="" alt="">
</Category>

<template>
  <div class="category">
      <slot>When no value is inserted, the</slot>
      <h3>classification</h3>
      <slot>When no value is inserted, the</slot>
  </div>
</template>

Presentation effect and reason:

Vue will not automatically put the first picture in the first slot in Category.vue and the second picture in the second slot. On the contrary, it will put the two pictures in the same slot, and because there are two slots, two pictures will appear in the page

Therefore, when the inserted content wants to be placed in different parts, it is necessary to use named slots

Operation:

1. Bind the slot attribute to the external layer for the inserted element
2. Bind the name attribute to the component slot

Note: the slot attribute of the element is consistent with the name attribute of the component slot

<Category>
  <img src="" alt="" slot="header">
  <img scr="" alt="" slot="footer">
</Category>

<template>
  <div class="category">
      <slot name="header">When no value is inserted, the</slot>
      <h3>classification</h3>
      <slot name="footer">When no value is inserted, the</slot>
  </div>
</template>

Then you can put the two pictures in different positions

However, when we insert too many elements into a slot, we must wrap a < div slot = "" > < / div >, but this div is not necessary and is added only to put it into the slot

In fact, we can use < template > < / template > instead of < div > < / div >, so that it will not appear in the actual code

When < template > < / template > is used to wrap elements, there is another binding method:

<!--Parent component-->
<Category>
    <template v-slot:xxx>
        <div>
            ......
        </div>
    </template>
</Category>

<!--Subassemblies-->
<template>
  <div class="category">
      <h3>classification</h3>
        <slot name="xxx"></slot>
  </div>
</template>

Precautions for this method binding:

1. After v-slot=
2. The attribute value of v-slot should not be quoted, otherwise an error will be reported
3. Only template can be written in this way

Scope slot

Personal understanding: the default slot and named slot are used to give content to child components, which are called by the parent component after splicing; However, the scope plug-in is more like placing the child component in the parent component, and the data of the child component is called by the parent component

Understanding: the data is in the component itself, but the structure generated by the data needs to be determined by the user of the component

<slot  :game="games" :foods="foods" :cars="cars"></slot>

    data() {
        return {
            games:["E","D","G","N","B"]
        }
    },

When the child component is written like this, the data passed to the parent component is:

{ "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }

Conclusion:

Write the attribute in the slot of the sub component. The last attribute name = > key attribute value = > value

When the passed data is not a string (variable, object, array), we need to bind the attribute to change the mode value into a string

<Category>
    <template  slot-scope="data" >
        {{data}}
    </template>
</Category>

The parent component uses slot scope to obtain the data passed by the child component, and the data here is the data passed

data = { "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }

Then we can use data to write code