当前位置：首页 > news >正文

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

news 2025/7/9 6:26:11

在 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>