Reference Material: Introduction to Key Concepts of VueJS Components

12002

In VueJS, components are a very important concept, serving as the basic unit for building VueJS applications and are reusable Vue instances.

This reference material helps you grasp the key concepts and usage related to components while reading VueJS documentation.

1. Concept and Role of Components

Component-based Development:

Component-based development is a method of breaking down a page into independent, reusable modules.

VueJS components allow developers to split complex user interfaces into independent components, each responsible for its own part of functionality, thereby improving code maintainability and reusability.

Encapsulation:

Components encapsulate templates, scripts, and styles, allowing developers to better organize and manage code. Each component has its own scope.

Reusability:

Components can be reused multiple times, reducing the workload of writing similar code repeatedly. Through component reuse, developers can build applications more quickly and share the same functionality across multiple pages.

Communication:

Components can communicate with each other through props (parent to child) and events (child to parent). The parent component can pass data to the child component, and the child component can notify the parent component of changes by triggering events.

Component Lifecycle:

VueJS components have lifecycle hook functions, such as created, mounted, updated, etc. These hooks allow developers to perform specific operations at different stages of the component, such as initializing data or sending network requests.

2. Communication Between Components

In VueJS or other front-end frameworks, communication between components refers to the process of passing data, events, or information between different components. In large applications, multiple components often collaborate, making communication between components very important.

Here are some common ways for communication between components:

1. Parent Component Passing Values to Child Component: Usage of Props

In VueJS, the parent component typically passes data to the child component through props. Props are a mechanism for the child component to receive data from the parent component.

• Defining props in the Parent Component:

  • When using a child component in the parent component, data can be passed to the child component by adding attributes to the child component tag. These attributes will be received by the child component as props.
  • Receiving props in the Child Component: In the child component, the props option can be used to declare the attributes that need to be received, allowing access to the data passed from the parent component.
  • Through props, the parent component can pass data to the child component, enabling communication and data sharing between components, making them more flexible and reusable.

2. Child Component Passing Values to Parent Component: Usage of Emit

Through the emit method, the child component can pass data to the parent component or trigger events, achieving communication between the child and parent components. This method follows VueJS's unidirectional data flow principle, making data transfer between components clearer and more controllable.

• Triggering Events in the Child Component

  • In the child component, a custom event can be triggered using this.$emit('eventName', eventData) to pass the required data.

• Listening to Events in the Parent Component

  • In the parent component, events triggered by the child component can be listened to on the child component tag, and the data passed from the child component can be handled in the corresponding event handler.

3. Advanced Usage of Components: Slots and Mixins

In VueJS, slots and mixins are two advanced usages that enhance the flexibility and reusability of components.

Usage of Slots:

Slots are used to define areas in a component that can be flexibly filled with content, allowing for component customization.

Usage of Mixins:

Mixins define a portion of reusable methods or computed properties. A mixin object can contain any component options. When a component uses a mixin object, all options from the mixin object will be merged into the component's own options.

5. Considerations When Using Components

1. Naming of Components

In VueJS, component naming is an important aspect. Following consistent naming conventions can make the code easier to understand and maintain.

Here are some common conventions and best practices for naming VueJS components:

• Component names should be in kebab-case:

  • Use hyphens (kebab-case) to name components, such as my-component. This improves readability and complies with HTML standards.

• Component names should be descriptive:

  • Component names should clearly express the functionality or purpose of the component, avoiding overly simple or vague names. For example, user-profile is more descriptive than profile.

2. Reusability of Components

In VueJS, component reuse can be divided into global reuse and local reuse.

• Global Reuse:

  • Refers to components that can be used throughout the entire application. In VueJS, you can achieve global reuse by registering components in the Vue instance.
  • Once a component is globally registered, it can be used in the templates of any Vue instance without needing to register it again in each component.

• Local Reuse:

  • Refers to components that are only available within specific parent components.
  • In VueJS, you can register child components in the components option of the parent component, making them available within that parent component.

3. Scope of Components

In VueJS, the scope of a component refers to the accessibility range of data, methods, and computed properties within the component. Understanding the scope of components is crucial for writing clear and maintainable VueJS components.

Here are some important concepts regarding the scope of VueJS components:

• Global Scope

  • The global scope in VueJS refers to the data, methods, and computed properties within the Vue instance, which can be accessed throughout the entire application.
  • Data in the global scope can be accessed directly using the this keyword.

• Local Scope

  • Each Vue component has its own scope, and the data, methods, and computed properties of a component are only available within that component by default.
  • This means that data between components is isolated from each other and will not affect one another.

6. Reference Documentation Links (not limited to these)

VueJS Documentation: https://cn.vuejs.org/guide/introduction.html
Rookie Tutorial VueJS: https://www.runoob.com/vue2/vue-tutorial.html