Details of using Vue slot

1. Why use slots?

1.1 slot

• There are slots in many places in life, such as the USB slots in computers and the power slots in the power strips.
• The purpose of the slot is to make our original equipment more expandable
• For example, we can insert USB flash drive, mobile phone, mouse, keyboard, etc. into USB of computer.
  

1.2 Slots in Components

• The component slots are also to make our components more extensible
• Let the user decide what to display inside the component
  

1.3 Examples

• In mobile development, almost every page has a navigation bar
• We must package the navigation bar into a plug-in
• Once we have this component, we can reuse it in multiple pages
  

2. How to encapsulate such components (slot)

• The best way to encapsulate is to extract commonalities into components and expose different parts as slots.
• Once we reserve a slot, we can let the user decide what to insert into the slot according to their needs.
• It is a search box, text, or button. It is up to the scheduler to decide.
  

3. Slot Case

<div id="app">
  <cpn><button>Button</button></cpn>
  <cpn><p>hello world</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<template id="cpn">
  <div>
    <h2>I am a component</h2>
    // The slot is reserved for users to fill in <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components:
      "cpn": {
        template: `#cpn`,
      }
    }
  })
</script>

The above code does the following:

• 1. Define the subcomponent cpn , and then reserve a slot in the subcomponent, and the content of the slot is filled in by the user
• 2. The parent component uses the child component three times, and the three child components fill in different contents in the slots.

The final display effect is as follows:

4. Slot default values

If we need to use this component a lot, and most of the slots reserved by the component are filled with return buttons, and only a few are filled with other ones, then in this case you can set a default value for the slot

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot><button>Return</button></slot>
  </div>
</template>

We set a slot with a default value of the back button in the child component. If the parent component does not fill in anything when it is used, the default is the back button.

5. Named Slots

Sometimes we need more than one slot. For example, for a component with the following template:

<template id="cpn">
  <div>
    <span>Header</span></slot>
    <span>Middle</span></slot>
    <span>Footer</span></slot>
  </div>
</template>

We have reserved three slots in the component, but here we specify three names. The subsequent parent component can fill in its own content after using v-slot to specify name attribute, such as the following code

<div id="app">
  <cpn>
    <template v-slot:header>
      <p>header</p>
    </template>
    <template v-slot:footer>
      <p>footer</p>
    </template>
  </cpn>
</div>

cpn component is used, and then the slot name attribute is specified as the content of header and footer . After specification, the content you fill in will replace the default content.

Note: The syntax format here is fixed and you must bind the v-slot: slot name when using the template tag.

6. Compilation scope

Variables passed to the component from outside cannot be used when the slot is used later

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    components:
      "cpn": {
        template: `#cpn`,
        data(){
          return {
            isShow: false
          }
        }
      }
    }
  })
</script>

Above we defined the subcomponent cpn , which has the attribute isShow . The attribute isShow is also defined in app instance. Finally, when using the subcomponent cpn , v- show is used. When the value is true , it is displayed, and when the value is false , it is not displayed.
Question: Is the value of isShow in v-show true in the instance or false in the child component?
Answer: It is true, because you are using it within the scope of the app instance, so isShow will look for it from data in the instance. Although you are binding it in cpn subcomponent, you only need to treat the cpn here as a normal tag. If you want the value of isShow false , then you only need to use <p v-show="isShow">hello</p>
in the template of the subcomponent. <p v-show="isShow">hello</p>


7. Scoped Slots

By default, the code in the slot can only use the properties in the global Vue . If you want to use the properties in a custom component, you need to use v-bind to bind when defining slot .

<div id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components:
      "cpn": {
        template: `#cpn`,
        data(){
          return {
            "user": {
              "firstName": "甲",
              "lastname": "shellworm"
            }
          }
        }
      }
    }
  })
</script>

The above code does the following things:

• 1. Define the subcomponent cpn, and define user in the subcomponent
• 2. The attribute data is bound to the slot of the subcomponent cpn template, and the default value of the slot is user.lastname

• 3. The subcomponent is used in html , and the slot Prop object is bound using v-slot , so that the data in the subcomponent can be accessed through the object name. The property name bound in the subcomponent ( slot.data )

This is the end of this article about the details of using Vue slot. For more information about the usage of Vue slot, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!