Angular、React、Vue 都遵循组件开发标准，组件是构建用户界面（UI）的基础。
三大框架允许我们将 HTML 标签、CSS 和 JavaScript 组合成自定义组件，即 应用程序中可复用的 UI 元素。
组件篇的系列文章我们将比较三大框架组件中的 JavaScript 部分，HTML 标签和 CSS会在模板篇中进行比较。
Angular 中组件的定义与使用
在 Angular 中，组件有以下几部分组成：
- 一个 HTML 模板，用于声明页面要渲染的内容
- 一个用于定义行为的 TypeScript 类
- 一个 CSS 选择器，用于定义组件在模板中的使用方式
- （可选）要应用在模板上的 CSS 样式
定义
在 Angular 中定义一个 HelloWorldComponent 组件的代码示例如下：
hello-world.component.ts 文件
import { Component } from '@angular/core';
@Component({
// CSS 选择器
selector: 'app-hello-world',
template: `
<p>Hello, world!</p>
`
})
export class HelloWorldComponent {
// JavaScript 逻辑代码可以写在这里
}
使用
在 Angular 在使用 HelloWorldComponent 组件示例如下：
app.module.ts 文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts 文件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-hello-world></app-hello-world>
`
})
export class AppComponent {}
React 中组件的定义与使用
在 React 中，组件是一段可以使用标签进行扩展 的 JavaScript 函数。
定义
在 React 中定义一个 HelloWorld 组件的代码示例如下：
HelloWorld.js 文件
export default function HelloWorld() {
// JavaScript 逻辑代码可以写在这里
return (
<p>Hello, World!</p>
)
}
使用
在 React 中使用 HelloWorld 组件示例如下：
App.js 文件
import HelloWorld from './HelloWorld.js';
export default function App() {
return (
<HelloWorld />
);
}
Vue 中组件的定义与使用
在 Vue 中使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。
定义
在 Vue 中定义一个 HelloWorld 组件的代码示例如下：
HelloWorld.vue 文件
<script setup>
// JavaScript 逻辑代码可以写在这里
</script>
<template>
<p>Hello, world!</p>
</template>
使用
在 Vue 中使用 HelloWorld 组件示例如下：
App.vue 文件
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>
<template>
<HelloWorld />
</template>
小结
在三大框架中，组件是为了在应用程序中可复用 UI 元素。无论使用哪个框架，组件化的开发才是当今前端开发的核心思想。
在接下来的章节中，我们将对组件的六个主题进行比较，它们分别是：
- 组件的生命周期
- Props
- Slot
- 组件中的事件
- 动态组件与异步组件
- 内置组件
文章参考链接：
网友评论