当前位置：首页 > JavaScript

js实现组件

2026-04-06 02:05:27JavaScript

使用 JavaScript 实现组件

在 JavaScript 中实现组件可以通过多种方式，包括原生 JavaScript、类组件、函数组件以及使用现代框架如 React、Vue 或 Angular。以下是几种常见的实现方法。

原生 JavaScript 实现组件

使用原生 JavaScript 可以通过类和原型链的方式创建组件。

class MyComponent {
  constructor(element) {
    this.element = element;
    this.render();
  }

  render() {
    this.element.innerHTML = `
      <div>
        <h1>Hello, World!</h1>
        <button id="myButton">Click Me</button>
      </div>
    `;
    this.bindEvents();
  }

  bindEvents() {
    const button = this.element.querySelector('#myButton');
    button.addEventListener('click', () => {
      alert('Button clicked!');
    });
  }
}

// 使用组件
const container = document.getElementById('app');
new MyComponent(container);

使用 React 实现函数组件

React 是目前流行的前端库之一，支持函数组件和类组件。

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

使用 Vue 实现组件

Vue 是另一个流行的前端框架，支持单文件组件（SFC）。

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

使用 Angular 实现组件

Angular 是一个完整的前端框架，使用 TypeScript 和装饰器。

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <h1>Count: {{ count }}</h1>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class MyComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

组件通信

组件通常需要与其他组件或父组件通信。

父子组件通信（React）

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleChildClick = (message) => {
    alert(`Message from child: ${message}`);
  };

  return <ChildComponent onChildClick={handleChildClick} />;
}

// ChildComponent.js
import React from 'react';

function ChildComponent({ onChildClick }) {
  return (
    <button onClick={() => onChildClick('Hello from child!')}>
      Click Me
    </button>
  );
}

状态管理（Vuex for Vue）

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// MyComponent.vue
<template>
  <div>
    <h1>Count: {{ $store.state.count }}</h1>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

组件生命周期

组件的生命周期在不同框架中有所不同。

js实现组件

React 生命周期

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

Vue 生命周期

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  beforeDestroy() {
    console.log('Component will destroy');
  }
};