(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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

水库大坝安全监测系统建设方案

一、背景 随着自动化技术的进步&#xff0c;大部分水库大坝不同程度地实现了安全监测自动化。但仍存在以下问题&#xff1a; 1、重建轻管&#xff0c;重视安全监测系统建设&#xff0c;不够重视运行维护。 2、缺乏系统性、综合性及相关性的资料分析功能。 3、软件大多为数据…

harbor 只读模式修改

The system is in read only mode. Any modification is prohibited。 使用harbor时&#xff0c;做了一个定时清理任务&#xff0c;可能是因为任务失败或者某种原因导致的&#xff0c;系统一直处于只读模式&#xff0c;以为是要看一些表结构&#xff0c;然后去修改参数&#xf…

2.2数据的表示和运算--原码、反码、补码、移码

2.数据的表示和运算 2.2原码、反码、补码、移码 &#x1f53a;问题&#xff1a;真值与对应的原码、反码、补码变换规则&#xff1f; 答&#xff1a; 正数&#xff1a;原码、反码、补码都一样。 负数&#xff1a;原码不变、反码除符号位其它各位取反、补码在反码基础上再加…

结合视差补偿与3D数据处理的盲光场图像质量评价

摘要&#xff1a;与传统的2D图像相比&#xff0c;光场图像记录了场景中光线的强度和方向信息&#xff0c;在多媒体技术应用领域中占据着重要的地位。但在光场图像的产生、传输等处理过程中会不可避免地引入失真&#xff0c;影响用户视觉体验&#xff0c;因而需构建有效、准确的…

英语口语中though的用法(even though、as though)

文章目录 英语口语中 "though" 的用法详解1. "Though" 作为转折连词的用法1.1 基本用法示例句子&#xff1a; 1.2 位置灵活性示例句子&#xff1a; 2. "Though" 作为副词的用法2.1 表示对比或转折示例句子&#xff1a; 2.2 强调前述观点示例句子…

从 0 到 1 带你认识 Git 在个人和企业开发中的原理及应用

文章目录 学习目标Git 初识提出问题如何解决&#xff1f;—— 版本控制器注意事项 Git 安装Linux CentOSLinux UbuntuWindows Git 基本操作创建 Git 本地仓库配置 Git 认识工作区、暂存区、版本库添加文件——场景一查看 .git 文件 添加文件——场景二 修改文件版本回退 学习目…

FPGA verilog入门案例笔记一

Verilog 是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;广泛应用于电子系统级&#xff08;ESL&#xff09;到寄存器传输级&#xff08;RTL&#xff09;的数字系统建模。 1. 模块&#xff08;Module&#xff09; Verilog 代码的基本单位是模块&#xff0c;它代表了…

浏览器渲染优--防抖节流懒加载

合理选择css选择器 相比于.content-title-span&#xff0c;使用.content .title span时&#xff0c;浏览器计算样式所要花费的时间更多。使用后面一种规则&#xff0c;浏览器必须遍历页面上所有 span 元素&#xff0c;先过滤掉祖先元素不是.title的&#xff0c;再过滤掉.title…

SpringBoot接口防抖(防重复提交)

TOC 啥是防抖 所谓防抖&#xff0c;一是防用户手抖&#xff0c;二是防网络抖动。在Web系统中&#xff0c;表单提交是一个非常常见的功能&#xff0c;如果不加控制&#xff0c;容易因为用户的误操作或网络延迟导致同一请求被发送多次&#xff0c;进而生成重复的数据记录。要针对…

日语日期相关词汇

传统新式何月なんがつ何時なんじ何分なんぶん何秒なんびょういち一月いちがつ&#xff11;時いちじ&#xff11;分いっぷん&#xff11;秒いちびょうに二月にがつ&#xff12;時にじ&#xff12;分にふん&#xff12;秒にびょうさん三月さんがつ&#xff13;時さんじ&#xff1…

学习小心意——python的构造方法和析构方法

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源 构造方法_init_() 语法格式如下&#xff1a; class 类名:def __init__(self, 参数1, 参数2, ...):# 初始化代码self.属性1 参数1self.属性2 参数2# ... 示例代码如下 class Student:def __init__(self):s…

如何利用CXL技术突破内存墙?-2

为了解决这些问题&#xff0c;业界正积极寻求新的技术和标准&#xff0c;比如Compute Express Link (CXL)&#xff0c;它旨在通过提供标准化的高速互连来提高内存带宽、降低延迟&#xff0c;并简化内存扩展的软件集成&#xff0c;从而有效地打破内存墙的限制。 通过使用CXL&am…

【POSIX】使用regex进行正则匹配

正则表达式是很关键的一个工具&#xff0c;各种编程语言中均通用&#xff0c;务必掌握 给出Linux中man page给出的一个示例&#xff1a; #include <stdint.h> #include <stdio.h> #include <stdlib.h> #include <regex.h>#define ARRAY_SIZE(arr) (s…

Spring的@Async注解及其用途

Spring 的 Async 注解是 Spring Framework 4.2 版本引入的功能&#xff0c;它用于支持异步方法执行。当一个方法标注了 Async&#xff0c;Spring 会在一个单独的线程中调用该方法&#xff0c;从而不会阻塞主线程的执行。 Async 注解的用途&#xff1a; 提高性能&#xff1a;通…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

NAVICAT从MYSQL链接到ORCAL数据库

1、工具-选线 2、环境&#xff0c;将原有的mysql的oci.dll文件改为oracle的 3、新建连接 填写对应数据

axios拦截器

定义 在客户端通过axios发送请求或响应被 then 或 catch 处理前拦截它们。顾名思义&#xff0c;在axios发送请求之前在请求数据内添加条件或者验证&#xff0c;并通过函数返回错误。在收到服务器的响应数据进行返回&#xff0c;遇到无法响应的情况在catch之前拦截错误信息进行…

国产高边驱动HD70202Q替换英飞凌BTS7040-2

高边驱动也称之为高边开关&#xff0c;主要用于车内负载的驱动与开关&#xff0c;并对负载进行保护和诊断。高边驱动以高可靠性、灵活性、低功耗以及小型轻量等特点&#xff0c;正逐渐替代传统的保险丝、继电器等方案。 RAMSUN提供的HD70202Q车规级双通道智能高边驱动的输入控…

迈普 多业务融合网关 send_order.cgi 前台RCE漏洞复现

0x01 产品简介 迈普多业务融合网关是迈普通信技术股份有限公司自主研发的多业务无线融合网关&#xff0c;拥有融合网关功能、精准流控、上网行为管理、智能选路…等强大功能&#xff0c;并支持对接迈普云平台&#xff0c;实现远程运维和集中管理&#xff0c;很好的满足了医疗/…

python API自动化(Jsonpath断言、接口关联及加密处理)

JsonPath应用及断言 重要 自动化要解决的核心问题 &#xff1a;进行自动测试-自动校验&#xff08;进行结果的校验 主要能够通过这个方式提取数据业务场景&#xff1a;断言 、接口关联 {key:value}网址&#xff1a;附&#xff1a;在线解析 JSONPath解析器 - 一个工具箱 - 好用…