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

coderpai

于 2024-06-03 10:42:55 发布

阅读量397

点赞数 5

分类专栏： svelte 文章标签： svelte

本文链接：https://blog.csdn.net/CoderPai/article/details/139408614

版权

svelte 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

（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 的条件语句块。