编程知识 cdmana.com

Basic knowledge of components in Vue "I"

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 」

image.png

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

image.png

The third step : Use global components in other pages

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

image.png

2.2 Local components

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

image.png

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

image.png

image.png

(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

版权声明
本文为[Liang Yu]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210909122358633u.html

Scroll to Top