【前端】Svelte：组件封装与使用

news2024/11/13 9:01:09

在 Svelte 中，组件化是开发的核心理念。将页面的不同部分封装成独立组件，不仅可以提升代码的复用性，还能让项目的结构更加清晰。在本文中，我们将介绍如何创建、封装、引入和使用 Svelte 组件，帮助你快速上手 Svelte 的基础组件操作。

组件基本结构

Svelte 组件的代码组织在 .svelte 文件中，通常包含三部分：

逻辑代码（使用 <script> 标签编写 JavaScript 代码）
样式代码（使用 <style> 标签定义局部样式）
模板代码（HTML 结构）

例如，我们创建一个简单的 HelloWorld.svelte 组件：

<!-- src/HelloWorld.svelte -->
<script>
  let name = "Svelte";
</script>

<style>
  h1 {
    color: #ff3e00;
    font-size: 24px;
  }
</style>

<h1>Hello, {name}!</h1>

封装组件

组件封装的核心理念是将具有独立功能的代码块放入单独的文件中。在 Svelte 中，任何 .svelte 文件都可以被视为一个组件。封装后的组件可以在其他组件中引入，从而实现模块化和复用性。

**示例：**我们可以将按钮封装成一个独立的 Button.svelte 组件，以便在项目中复用该按钮。

<!-- src/Button.svelte -->
<script>
  export let label = "Click me"; // 导出变量，以便父组件传入自定义标签
</script>

<button>{label}</button>

<style>
  button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

在这个例子中，Button.svelte 定义了一个按钮样式，并将按钮的文本内容封装在 label 变量中。通过使用 export 关键字，我们可以允许外部传入自定义的按钮标签。

引入并使用组件

封装好的组件可以通过 import 语句引入到其他 .svelte 文件中。

**示例：**我们在主应用组件 App.svelte 中引入并使用 Button 组件。

<!-- src/App.svelte -->
<script>
  import Button from './Button.svelte'; // 引入Button组件
</script>

<main>
  <h1>Welcome to Svelte App</h1>
  <Button label="Submit" />  <!-- 使用Button组件并传入自定义标签 -->
  <Button label="Cancel" />
</main>

<style>
  h1 {
    font-size: 2em;
    color: #333;
  }
  main {
    padding: 20px;
    font-family: Arial, sans-serif;
  }
</style>