Define local components in component options. Each component is a small instance of Vue, which has all options except the el option.
Component name: user-defined, which can be named by hump or short horizontal line. However, it should be noted that if it is applied to DOM, it can only be named by short horizontal line, otherwise an error will be reported. Note that the name of the component should not be the same as the name of the native html element.
Template option: define the template of the component. The template must contain the root tag.
Props option: define properties on the component tab. The proper name of hump nomenclature (post title) needs to be named by its equivalent short horizontal line separation nomenclature (post title). Note: props is read-only and cannot be modified (solution: relay the data received by props in data).
Data: Data that defines the component. Note: The data option of a Vue instance can be an object or a method that returns an object. But in a component, the data option must be a method that returns an object. Because components may be used multiple times, if the data option is an object, it will cause multiple components to use the same data.
A globally registered component can be used in the template of any newly created root instance (new Vue).
Create a global component using Vue.component. The first parameter of Vue.component is the component name.
$emit () is used to trigger custom events. Note: You cannot use uppercase letters in the event name.
Effect:
Effect:
Slot is used to define a slot inside a component, and all html content between component tags will be presented at the location of the slot.
Effect: