I. Component summary

1.1. Features of components

  • Each component is a custom tag
  • reusable
  • Convenient maintenance
  • Convenient split
  • Each component is a separate VM instance
  • Each component scope isolation “non-interference”
  • There is a full life cycle
  • Has its own responsive data and various method “events”

1.2 Component Retrieval

  • Single closure: does not conform to W3C specification, after the call is complete, the following view does not recognize “Avoid single closure”
  • Double closed: You can set the contents except those specified in the component. Slot Slot

1.3 Components in Vue scaffolding

  • Place it under the Components file
  • It is best to use camel name for component names

Create a component

2.1 Creating Global Components

Step 1: Create a GlobalCom.vue component under the Components folder

  • The data property in the component must be a function and must return an object
  • Why it returns an object: The idea of a component is reuse. Every time I call this component, I return a new object. This will form a closure, so I change the value of data in this component without affecting the other components.
  • The data function can’t be an arrow function, because arrow functions don’t have their own this. “We need this for development.”
  • The name attribute in the component is used to facilitate routing configuration
  • In VUe2, a component must have a div element and only one “root” element.

Step 2: Import and register the component in main.js

  • Import GlobalCom components based on import in main.js
  • Register global components with Vue.com Ponent

Step 3: Use global components in other pages

  • Use component tags in the page “Be careful to use double closed tags”

2.2 Local Components

Step 1: Create the partialcom.vue component under the Components file

Step 2: Import, register, and label the component on the page where you want to use it

Differences between global and local components

  • Global components: Generally used to encapsulate plug-ins. Global components need to be imported and registered in main.js. When used in other pages, you can directly write component labels without importing them
  • Local components: To be used in other components, they must be imported and registered in the current page