Vue components

Component is used to encapsulate part of the function of the page, and encapsulate the structure, style and logical code of the function as a whole.

Improve the reusability and maintainability of functions, and better focus on business logic.

Components are used in the form of custom HTML tags, with the component name as the name of the custom tag

< div id = "app" > / / ordinary HTML tag < p > < / p > / / Vue. Js component < my - com > < / my - com > < / div >

The component overview

  • The component registration
  • Component communication
  • Component slot
  • Built-in component

The component registration

  • Component registers article entry

Component communication

  • The operation of passing data between components is called component communication

The problem


How does a child component get data from a parent component?


How does the parent component know about data changes in the child component?


More complex component relationships?

  • Component communication article entry

Component slot

  • Component slots allow you to easily set component content.

For example, if a parent component sets the contents of a child component, it may require the parent component to call the contents of the child component. For example, if the parent component sets the contents of the child component, it may need the parent component to call the contents of the child component

< div id = "app" > > < com - a sample content < span > the theme of the component content < / span > < / com - a > < / div >
  • Component slot article entry

Built-in component

  • Built-in component article entry