1. The slot template is a slot, which is an empty shell, because its display and hiding as well as the final html template display are controlled by the parent component. However, the location of slot display is determined by the child component itself. The template from the parent component will display the slot in the future. This makes components more reusable and flexible. At any time, we can add something needed to the child component through the parent component.

For any component, from the perspective of template type, it can be divided into non slot template and slot template. Non slot templates refer to html templates, such as' DIV, span, UL, table '. Slot templates refer to slot templates,

The specific usage is as follows:

Parent component code:

<div id="app">
    <div>
      <!-- single slot -->
      <v-one>
        <p>Initialize paragraph one</p>
        <p>Initialize paragraph 2</p>
      </v-one>


      <!-- Named slot -->
      <v-two>
        <p slot="nav">I'm navigation</p>
        <p slot="main">I am the content</p>
        <p slot="footer">I'm the bottom</p>
      </v-two>


      <!-- Scope slot -->
      <v-three>
      <!-- Parent component cannot use child component data by default -->
          <template scope="props">
              <p>{{props.text}}</p>
          </template>
      </v-three>
    </div>
  </div>

Subcomponent Code:

<template id="one">
    <div>
      <h1>Component title</h1>
      <slot></slot>
      <p>Component paragraph content</p>
      <p>I am one</p>
    </div>
  </template>


  <!-- Named slot -->
  <template id="two">
    <div>
      <nav>
        <slot name="nav"></slot>
      </nav>
      <main>
        <slot name="main"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>

<!-- Scope slot -->
  <template id="three">
    <div>
        <!-- Transfer data to slot,So that the parent component can also access three Data for this component
                        :text="three"The corresponding value is three:"i am three"-->
      <slot :text="three"></slot>
    </div>
  </template>

Effect:

---------------------------------------------

2. In the input tag

      autocomplete="off"

The input attribute autocomplete is on by default, which means whether to let the browser automatically record the previously entered value. In many cases, the information of the customer needs to be kept secret to prevent the browser software or malicious plug-ins from getting it. You can add autocomplete="off" to input to turn off the record. This parameter can be used when the system needs to keep secret