One 、 Component Overview

1.1、 Features of components

• Each component is a custom tag
• Reusable
• Convenient maintenance
• Easy to split
• Each component is an independent vm example
• Each component scope is isolated 「 Mutual interference 」
• There is a complete life cycle
• It has its own responsive data and various methods 「 event 」

1.2 Component retrieval

• Single closed ： Do not conform to the W3C standard , After the subsequent retrieval is completed , The back view does not recognize 「 Avoid using single closure 」
• Double closure ： You can set other contents except those specified by the component 「slot slot 」

1.3 Vue Components in scaffolding

• Put in components Under the document
• The name of the component shall preferably be humped

Two 、 Create components

2.1 Create global components

First step ： stay components Create a new folder GlobalCom.vue Components

• In the component data Property must be a function , And must return an object
• Why return an object ： The idea of components is reusability , Every time this component is called , Return a new object , This will form a closure , That is, I modified... In this component data The value of the inside , It will not affect other components 「 Similar to the singleton design pattern 」
• data This function cannot be an arrow function , Because the arrow function does not have its own this「 We need to use... When developing this」
• In the component name Property is convenient to use when configuring routes
• stay vue2 The outermost layer of the middle component must be covered with a div Elements , And only one 「 Root element 」

The second step ： stay main.js Import and register components in

• stay main.js Based on import Import GlobalCom Components
• Use Vue.component Registering global components

The third step ： Use global components in other pages

• Use component tags in the page 「 Note the use of double closed labels 」

2.2 Local components

First step ： stay components New under file PartialCom.vue Components

The second step ： Import... In the page that needs to use this component 、 register 、 Write the component label and use the component

(III) the difference between whole office components and local components

• Global components ： Generally used to encapsulate plug-ins , Global components need to be in main.js Import and register , When used in other pages , Just write the component label directly , There is no need to import
• Local components ： To use in other components , You have to import... In the current page , You can only register