Component-Based Programming in Vue 2

In component-based architecture, a module refers to a self-contained JavaScript unit—typically a file—that provides specific functionality. Modules help manage complexity in large codebases by isolating logic for reuse, simplifying maintenance, and improving execution efficiency. A component extends this concept to encapsulate not only JavaScript, but also related resources such as HTML, CSS, and images, enabling reusable building blocks for complex UIs. Components allow developers to compose sophisticated interfaces from independent, interchangeable units forming a component tree.

Nesting Components

Components can be nested to reflect hierarchical UI structures. Example:

<!DOCTYPE html>
<html>
<head>
  <title>Nested Components Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="appContainer"></div>

  <script>
    Vue.config.productionTip = false;

    // Learner widget
    const learnerComp = Vue.extend({
      name: 'LearnerView',
      data() {
        return { learnerName: 'TechAcademy', learnerAge: 20 };
      },
      template: `
        <div>
          <p>Learner: {{ learnerName }}</p>
          <p>Age: {{ learnerAge }}</p>
        </div>
      `
    });

    // Institution widget
    const institutionComp = Vue.extend({
      name: 'InstitutionView',
      data() {
        return { instName: 'TechAcademy', city: 'Shanghai' };
      },
      components: { learnerComp },
      template: `
        <section>
          <h2>Institution: {{ instName }}</h2>
          <h3>Location: {{ city }}</h3>
          <learner-comp></learner-comp>
        </section>
      `
    });

    // Greeting widget
    const greetingComp = Vue.extend({
      data() {
        return { welcomeText: 'Explore modern web development!' };
      },
      template: `<h3>{{ welcomeText }}</h3>`
    });

    // Root composition
    const rootComp = Vue.extend({
      components: { institutionComp, greetingComp },
      template: `
        <main>
          <greeting-comp></greeting-comp>
          <institution-comp></institution-comp>
        </main>
      `
    });

    new Vue({
      el: '#appContainer',
      template: '<root-comp></root-comp>',
      components: { rootComp }
    });
  </script>
</body>
</html>

An application is modular when its JavaScript is split into modules; it is componentized when its features are constructed from multiple components.

Component Forms and Usage

Non-SFC (Single File Component) forms lack tooling support: no template hints, no transpilation from ES6+ to ES5, and no scoped styling. They are rarely used in production.

SFC encapsulates a component’s template, logic, and styles in a .vue file, enabling robust reuse and maintainability through build tools.

Core steps for component creation:

  1. Define using Vue.extend(options). Omit el—attachment is handled by a parent VM. Provide data as a function to avoid shared state across instances.
  2. Register:
    • Local: Include in components option of a VM or parent component.
    • Global: Use Vue.component('tag-name', definition).
  3. Use: Insert via custom tags like <institution-comp></institution-comp>.

Example SFC structure (Institution.vue):

<template>
  <section>
    <h2>{{ title }}</h2>
    <p>{{ location }}</p>
  </section>
</template>

<script>
export default {
  data() {
    return { title: 'TechAcademy', location: 'Shanghai' };
  },
  methods: { /* ... */ },
  computed: { /* ... */ },
  components: { /* ... */ }
};
</script>

<style scoped>
section { border: 1px solid #ccc; padding: 1em; }
</style>

Usage workflow:

  1. Import the component.
  2. Map it to a tag via registration.
  3. Reference the tag in templates.

VueComponent Internals

A component defined via Vue.extend is represented at runtime by a generated constructor VueComponent. When a component tag is encountered, Vue instantiates it with new VueComponent(options). Each call to Vue.extend yields a distinct constructor, ensurnig isolated component instances.

Within a component's options, this in data, methods, watch, and computed refers to the component instance (commonly called vc). In a root VM, this refers to the Vue instance (vm).

Key prototype link:

VueComponent.prototype.__proto__ === Vue.prototype

This linkage lets component instances access properties and methods on Vue.prototype.

Naming conventions:

  • Single-word: school or School.
  • Multi-word: my-school (kebab-case) or MySchool (PascalCase, requires tooling).
  • Avoid clashes with native HTML elements.
  • Use the name option to control display in debugging tools.

Structuring a Project with SFCs

Typical layout:

  • School.vue
  • Student.vue
  • App.vue (composition root)
  • main.js (VM bootstrap)
  • index.html (entry page)

Tooling tip: Install the Vetur extension for streamlined .vue file authoring, including snippet triggers like <v. Ensure components are registered after their definitions to prevent reference errors. Every invocasion of Vue.extend creates a unique VueComponent, guaranteeing distinct identity for each component class.

Tags: vue2 Component frontend javascript SFC

Posted on Tue, 25 Aug 2026 16:07:17 +0000 by newdles

Hot Tags

©2026 Freaks City