1. Locally registered components are not available in their subcomponents.

2. For props, it is camelCase in JavaScript, kebab case in html, and unlimited in string template.

 props: {
    propA: Number, // Basic type checking ('null 'matches any type)
   
    propB: [String, Number],  // Multiple possible types
   
    propC: {
      type: String,
      required: true  // Required string
    },
    
    propD: {
      type: Number,
      default: 100  // Number with default
    },
   
    propE: {        // Objects with default values
      type: Object,
      default: function () {   // Object or array and must return the default value from a factory function
        return { message: 'hello' }
      }
    },
    
    propF: {    // Custom validation function
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== -1  // Must match one of the following
      }
    }
 
 }

3. Event name:
this.$emit('myEvent '), because HTML is case insensitive, so v-on: myEvent will become v-on: myEvent, which makes myEvent impossible to be monitored.

Therefore, the event name is recommended: kebab case or all lowercase

4. slot:

Example:

Normal slot:

Sub components:
<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

//Parent component:
<navigation-link url="/profile">
  <font-awesome-icon name="user"></font-awesome-icon>    //You can insert a component
  Your Profile                                           //Text can be inserted
  <span class="fa fa-user"></span>                       //Can insert html
</navigation-link>


//Sub components:
<a v-bind:href="url" class="nav-link">
  <slot>Submit</slot>                //The default content of slot is' Submit '. When there is a corresponding content,' Submit 'will be overwritten
</a>

Named slots (multiple slots required for a subcomponent):

Sub components:
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>                                     //The unnamed slot is called the default slot
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>


In parent component( template Usage):
<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>  
  </template>

  <p>A paragraph for the main content.</p>             //Unnamed content matches unnamed slots
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>


In the parent component (common element usage):
<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>              //Unnamed content matches unnamed slots
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>