(10)svelte 教程:Slots

2024-06-04 02:12
文章标签 教程 svelte slots

本文主要是介绍(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 的值,使其在 truefalse 之间切换。
<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
<script>export let showModal = false;export let isPromo = false;
</script>
  • export let showModal = false;

    • 声明并导出一个名为 showModal 的变量,初始值为 false。这个变量由外部(父组件)传入,用于控制 Modal 组件的显示与隐藏。
  • export let isPromo = false;

    • 声明并导出一个名为 isPromo 的变量,初始值为 false。这个变量用于控制 Modal 组件是否具有 promo 样式。
{#if showModal}<!-- svelte-ignore a11y-click-events-have-key-events --><div class="backdrop" class:promo={isPromo} on:click|self><div class="modal"><slot name="title"><h3>Default Title</h3></slot><slot></slot></div></div>
{/if}
  • {#if showModal}

    • Svelte 的条件渲染语句。如果 showModaltrue,则渲染内部的内容。
  • <!-- svelte-ignore a11y-click-events-have-key-events -->

    • Svelte 的注释,忽略关于 a11y-click-events-have-key-events 的可访问性警告。
  • <div class="backdrop" class:promo={isPromo} on:click|self>

    • 创建一个 div 元素,类名为 backdrop,并根据 isPromo 的值动态添加 promo 类。
    • on:click|self:为 div 绑定 click 事件,并添加 self 修饰符。该修饰符确保只有在直接点击 div 元素时才会触发事件处理函数,而不会在其子元素上触发。
  • <div class="modal">

    • 创建一个类名为 modaldiv 元素,用于显示模态框的内容。
  • <slot name="title">

    • 创建一个命名插槽,名称为 title。如果父组件提供了对应的插槽内容,则渲染该内容;否则,渲染默认内容。
  • <h3>Default Title</h3>

    • slot 内部,提供一个默认标题 “Default Title”。
  • <slot></slot>

    • 创建一个默认插槽。如果父组件提供了插槽内容,则渲染该内容;否则,插槽内容为空。

以上代码展示了如何在 Svelte 中使用 Slots 来实现灵活的组件内容插入。通过命名插槽和默认插槽,父组件可以在子组件中插入任意内容,从而增强组件的可复用性和定制化能力。

App.svelte 完整代码

<script>import Modal from './Modal.svelte';let showModal = false;let toggleModal = () => {showModal = !showModal;};</script><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><main><button on:click={toggleModal}>Open Modal</button></main><style>main {text-align: center;padding: 1em;max-width: 240px;margin: 0 auto;}@media (min-width: 640px) {main {max-width: none;}}</style>

Modal.svelte 完整代码

<script>export let showModal = false;export let isPromo = false;
</script>{#if showModal}<!-- svelte-ignore a11y-click-events-have-key-events --><div class="backdrop" class:promo={isPromo} on:click|self><div class="modal"><slot name="title"><h3>Default Title</h3></slot><slot></slot></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>

这篇关于(10)svelte 教程:Slots的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1028775

相关文章

Linux搭建Mysql主从同步的教程

《Linux搭建Mysql主从同步的教程》:本文主要介绍Linux搭建Mysql主从同步的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux搭建mysql主从同步1.启动mysql服务2.修改Mysql主库配置文件/etc/my.cnf3.重启主库my

SpringBoot操作MaxComputer方式(保姆级教程)

《SpringBoot操作MaxComputer方式(保姆级教程)》:本文主要介绍SpringBoot操作MaxComputer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录引言uqNqjoe一、引入依赖二、配置文件 application.properties(信息用自己

Tomcat的下载安装与使用教程

《Tomcat的下载安装与使用教程》本文介绍了Tomcat的下载、安装和使用方法,包括在本机和云服务器上部署Tomcat的过程,以及解决启动失败问题的方法... 目录Tomcat的下载安装与使用Tomcat的下载与安装Tomcat在本机运行使用Tomcat在php云服务器上的使用总结Tomcat的下载安装与

SpringBoot基于沙箱环境实现支付宝支付教程

《SpringBoot基于沙箱环境实现支付宝支付教程》本文介绍了如何使用支付宝沙箱环境进行开发测试,包括沙箱环境的介绍、准备步骤、在SpringBoot项目中结合支付宝沙箱进行支付接口的实现与测试... 目录一、支付宝沙箱环境介绍二、沙箱环境准备2.1 注册入驻支付宝开放平台2.2 配置沙箱环境2.3 沙箱

IDEA接入Deepseek的图文教程

《IDEA接入Deepseek的图文教程》在本篇文章中,我们将详细介绍如何在JetBrainsIDEA中使用Continue插件接入DeepSeek,让你的AI编程助手更智能,提高开发效率,感兴趣的小... 目录一、前置准备二、安装 Continue 插件三、配置 Continue 连接 DeepSeek四

jdk21下载、安装详细教程(Windows、Linux、macOS)

《jdk21下载、安装详细教程(Windows、Linux、macOS)》本文介绍了OpenJDK21的下载地址和安装步骤,包括Windows、Linux和macOS平台,下载后解压并设置环境变量,最... 目录1、官网2、下载openjdk3、安装4、验证1、官网官网地址:OpenJDK下载地址:Ar

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx