在 Svelte 中，组件属性是一种非常强大的功能，允许我们自定义组件的行为和外观。通过属性，我们可以将外部数据传递给组件，并根据这些数据动态地改变组件的输出。本章将详细介绍如何使用 Svelte 的组件属性。
属性的基本使用
属性是组件的一个重要部分，用于传递数据到组件内部。Svelte 中的属性可以是静态的，也可以是动态的。静态属性是在模板中直接指定的值，而动态属性则依赖于外部变量或表达式。
静态属性示例
<script>
export let name = 'World';
</script>
<h1>Hello {name}!</h1>在这个例子中，name 是一个静态属性，其值在组件内部被设置为 'World'。
动态属性示例
<script>
export let greeting = 'Hello';
export let name = 'World';
</script>
<h1>{greeting} {name}!</h1>在这个例子中，greeting 和 name 都是动态属性，它们可以从父组件传递进来，并根据需要进行更新。
默认属性值
当未提供属性值时，Svelte 允许我们为属性指定默认值。这可以通过在 <script> 标签中使用 export let 语句来实现。
<script>
export let greeting = 'Welcome';
export let name = 'User';
</script>
<h1>{greeting} {name}!</h1>在这个例子中，如果父组件没有提供 greeting 或 name 的值，则它们将分别默认为 'Welcome' 和 'User'。
类型检查
为了确保属性值符合预期，Svelte 提供了一种简单的类型检查机制。虽然 Svelte 本身不强制执行类型检查，但开发者可以利用 TypeScript 来实现这一点。
使用 TypeScript 进行类型检查
首先，确保你的项目支持 TypeScript。然后，在组件中定义类型：
<script lang="ts">
export let greeting: string = 'Welcome';
export let name: string = 'User';
</script>
<h1>{greeting} {name}!</h1>这样，TypeScript 编译器会帮助你检查属性的类型是否正确。
传递事件
除了数据之外，组件还可以通过属性传递事件处理程序。这种机制使得子组件能够触发父组件中的函数。
传递事件处理程序
// www.javascriptcn.com code example
<script>
import ChildComponent from './ChildComponent.svelte';
function handleClick(event) {
console.log('Button clicked:', event.target);
}
</script>
<ChildComponent on:click={handleClick} />在这个例子中，ChildComponent 可以触发点击事件，该事件将由父组件中的 handleClick 函数处理。
动态属性绑定
动态属性绑定允许我们在运行时动态地修改组件的属性值。这通常通过将属性值绑定到变量或表达式来实现。
动态属性绑定示例
<script>
let isBold = true;
</script>
<h1 class:highlight={isBold}>Dynamic Text</h1>在这个例子中，class:highlight 将根据 isBold 的值动态添加或移除 highlight 类。
属性验证
虽然 Svelte 没有内置的属性验证机制，但你可以通过自定义函数来实现这一功能。例如，可以在组件中定义一个方法来验证传入的属性值是否有效。
属性验证示例
// www.javascriptcn.com code example
<script>
export let name;
// 自定义验证函数
function validateName(value) {
if (typeof value !== 'string') {
throw new Error('name must be a string');
}
}
// 在组件初始化时调用验证函数
validateName(name);
</script>
<h1>Hello {name}!</h1>在这个例子中，validateName 函数确保 name 是一个字符串。如果不是，则会抛出一个错误。
总结
通过以上内容，你应该对 Svelte 组件属性有了全面的理解。属性不仅允许你在组件之间传递数据，还能让你创建更加灵活和可复用的组件。希望这些技巧能帮助你在实际项目中更有效地使用 Svelte 组件属性。