（10）svelte 教程：Slots

（10）svelte 教程：Slots

什么是 Slots

Slots 是 Svelte 框架中的一种特性，用于在组件中定义插槽，以便父组件可以向子组件传递任意的内容。这种机制使得组件更具灵活性和可复用性，因为你可以在组件内部插入动态的、定制的内容。Slots 主要有两种类型：默认插槽和命名插槽。

逐行解释代码

App.svelte

<script>
    import Modal from './Modal.svelte';

    let showModal = false;
    let toggleModal = () => {
      showModal = !showModal;
    };
</script>

• import Modal from './Modal.svelte';

  • 从当前目录中导入名为 Modal 的 Svelte 组件。

• let showModal = false;

  • 声明一个名为 showModal 的变量，初始值为 false。这个变量用于控制 Modal 组件的显示与隐藏。

• let toggleModal = () => { showModal = !showModal; };

  • 声明一个名为 toggleModal 的箭头函数。这个函数的作用是切换 showModal 的值，使其在 true 和 false 之间切换。

<Modal {showModal} on:click={toggleModal}>
    <!-- <h3>Add a New Ninja</h3> -->
    <form>
      <input type="text" placeholder='name'>
      <input type="text" placeholder='belt colour'>
      <button>Add Ninja</button>
    </form>
    <div slot="title">
      <h3>Add a New Ninja</h3>
    </div>
</Modal>

• <Modal {showModal} on:click={toggleModal}>

  • 使用 Modal 组件，并传递两个属性：
    • {showModal}：将 showModal 变量的当前值传递给 Modal 组件，使其能够根据该值决定是否显示。
    • on:click={toggleModal}：监听 Modal 组件的 click 事件，当该事件触发时，调用 toggleModal 函数。

• <!-- <h3>Add a New Ninja</h3> -->

  • 注释掉的标题行，用于说明表单的用途。

• <form>

  • 创建一个表单元素，包含三个子元素：
    • <input type="text" placeholder='name'>：一个文本输入框，用于输入忍者的名字。
    • <input type="text" placeholder='belt colour'>：一个文本输入框，用于输入忍者的腰带颜色。
    • <button>Add Ninja</button>：一个提交按钮，标签为 “Add Ninja”。

• <div slot="title">

  • 创建一个 div 元素，并通过 slot="title" 属性指定其为命名插槽的内容。
  • <h3>Add a New Ninja</h3>：在 div 内部，创建一个 h3 元素，显示 “Add a New Ninja” 作为标题。

<main>
    <button on:click={toggleModal}>Open Modal</button>
</main>

• <main> 和 <button on:click={toggleModal}>Open Modal</button>
  • 创建一个 main 元素，并在其内部创建一个按钮。
  • on:click={toggleModal}：为按钮绑定 click 事件，当按钮被点击时，调用 toggleModal 函数，切换 showModal 的值，从而控制 Modal 的显示与隐藏。

Modal.svelte