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

（7）svelte 教程： Props(属性)

news 来源：原创 2024/6/25 14:05:39

（7）svelte 教程： Props(属性)

什么是 Props

Props（属性） 是组件之间传递数据的一种机制。父组件可以通过 props 向子组件传递数据，子组件通过 export let 声明接收这些数据。在 Svelte 中，props 是组件交流和共享数据的主要方式。

逐行解释代码

我们将逐行解释示例代码，包括每个参数和背后的含义。

App.svelte

<script>import Modal from './Modal.svelte';
</script><Modal message="Hey, I'm a prop value" isPromo={false}/>
<main></main><style>main {text-align: center;padding: 1em;max-width: 240px;margin: 0 auto;}@media (min-width: 640px) {main {max-width: none;}}</style>

<script>：
- 该标签用于编写 JavaScript 代码，包含组件的逻辑部分。
import Modal from './Modal.svelte';：
- 这行代码从当前目录导入了名为 Modal 的组件。Modal.svelte 是一个独立的 Svelte 组件文件，通过 import 语法将其引入到当前组件中。
<Modal message="Hey, I'm a prop value" isPromo={false}/>：
- 这是一个自定义组件的实例，用于在 App.svelte 组件中嵌入和显示 Modal 组件。
- message="Hey, I'm a prop value"：通过 message 属性向 Modal 组件传递字符串 "Hey, I'm a prop value"。message 是一个 prop。
- isPromo={false}：通过 isPromo 属性向 Modal 组件传递布尔值 false。isPromo 是一个 prop，使用大括号 {} 包裹布尔值。
<main>：
- HTML <main> 元素，用于包裹应用的主要内容。在这个示例中，<main> 元素是空的，但通常用于包含应用的核心内容。

Modal.svelte

<script>export let message = "default value";let showModal = true;export let isPromo = false;
</script>{#if showModal}<div class="backdrop" class:promo={isPromo}><div class="modal"><p>{message}</p></div></div>
{/if}<style>.backdrop{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.8);}.modal{padding: 10px;border-radius: 10px;max-width: 400px;margin: 10% auto;;text-align: center;background: white;}.promo .modal{background: crimson;color: white;}</style>

<script>：
- 该标签用于编写 JavaScript 代码，包含组件的逻辑部分。
export let message = "default value";：
- 声明并导出一个名为 message 的变量，并将其初始值设置为 "default value"。通过 export 语法，父组件可以传递新的 message 值给这个变量。
let showModal = true;：
- 声明一个名为 showModal 的变量，并将其初始值设置为 true。该变量用于控制模态框的显示状态。
export let isPromo = false;：
- 声明并导出一个名为 isPromo 的变量，并将其初始值设置为 false。通过 export 语法，父组件可以传递新的 isPromo 值给这个变量。
{#if showModal}：
- Svelte 的条件语句块，用于根据 showModal 变量的值动态显示或隐藏内容。当 showModal 为 true 时，条件块内的内容将被渲染；当 showModal 为 false 时，条件块内的内容将被移除。
<div class="backdrop" class:promo={isPromo}>：
- HTML <div> 元素，具有 backdrop 类。
- class:promo={isPromo}：Svelte 的类绑定语法。当 isPromo 为 true 时，promo 类将被添加到 <div> 元素中；当 isPromo 为 false 时，promo 类将被移除。
<div class="modal">：
- HTML <div> 元素，具有 modal 类，用于定义模态框的内容区域。
<p>{message}</p>：
- HTML <p> 段落元素，使用 {message} 表达式将 message 变量的值插入到段落中。message 的值可以由父组件通过 props 传递进来。
{/if}：
- 结束 Svelte 的条件语句块。