How to use vue components

Table of contents

1: Parent-child relationship between components

2: Three steps for using components

3: The components component is a private subcomponent

4: Use Vue.component to register the component globally in the main.js file


1: Parent-child relationship between components

1: First of all, there is no relationship between the packaged components. Each packaged component is independent of each other.

2: In the process of using components, according to the nesting relationship, a sibling relationship or a parent-child relationship may be formed as shown in the figure (the APP component uses the component Left and the component Right, and the Left and Right components form a parent-child relationship with the App component. The Left and Right components are brothers).

 

2: Three steps for using components

1: Which components need to be used in which components? Use the import syntax to import the required components.

Two: Use the components node to declare components

Notice:

Full form: (key:value)

Abbreviated form: key and value are consistent and can be declared with one name

Three: Use the component just registered in the form of a label

3: The components component is a private subcomponent

For example: Component B is registered under the components node in component A, then component B can only be used in component A and cannot be used in component C, unless C The B component is declared under the components node of the component, and the B component can be used.

4: Use Vue.component to register the component globally in the main.js file

Scenario: Frequently used components can be registered in the main.js file for global registration.

For components registered globally, other components that use this global component can directly use the registered name as a label. Global components cannot use themselves in components.

Guess you like

Origin blog.csdn.net/m0_64550837/article/details/134753687