• In VUE, you are not allowed to write between the introduced child component labels. To solve this problem, officials introduced the concept of slots.

  • Slots are basically placeholders. It takes a place in the component for your HTML template to pass something in.

Slots are classified into anonymous slots, named slots, and scoped slots.

  1. Anonymous slot

We can also call it a single slot or a default slot. As opposed to a named slot, it does not need to set the name attribute. (Its hidden name attribute is default.)

References in the anonymous slot component:

<show-cont>
  aaa
</test-man>
Copy the code

Use of anonymous slots in components:

Vue.component('show-cont', {
    template:` 
       `
  })
Copy the code

As shown in the previous example, the slot tag does not have a name attribute, so the text in the slot tag referenced by the show-cont component defaults to the solt unique in the component

  1. A named slot

Slots have a name attribute. As opposed to an anonymous slot, an anonymous slot with the name attribute is a reference in the anonymous slot component of the named slot:

<show-cont>
  <template v-slot:aa>
    <span>This is the contents of the second slot</span>
  </template>
  <template v-slot:bb>
    <span>This is the contents of the first slot</span>
  </template>
</show-cont>
Copy the code

Use of anonymous slots in components:

Vue.component('show-cont', {
    data(){
      return{}},template:` 
      
 
       
 `
  })
Copy the code
  1. Scope slot

This type of slot allows the parent component to use the data of the child component. As long as the child component uses v-bind to the slot, the parent component can use v-slot=”slotProps” to receive the data. Note: slotProps can be customized.

<show-cont v-slot="props">
      <v-btn >{{props.person.name}}</v-btn>
</show-cont>
Copy the code

Use of anonymous slots in components:

Vue.component('show-cont', {
    data(){
      return {
          person: {
              name: 'wang123'}}},template:` 
      
 
       
 `
  })
Copy the code

In addition

The solt label can still write something else as the default value of the slot. If the component references the slot without assigning a new value, the default value will be used, or the default value will be overridden. The following cases:

References in the anonymous slot component:

<show-cont>
  aaa
</test-man>
Copy the code

Use of anonymous slots in components:

Vue.component('show-cont', {
    template:` 
      
 
       
         bbb 
       
 `
  })
Copy the code

The component is thus displayed as the result: AAA

// BBB is the default value and aaa overwrites the default value