首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Svelte 3 getContext:没有在Svelte中存储

Svelte是一种现代的JavaScript框架,用于构建用户界面。它具有轻量级、高效和易于学习的特点。Svelte 3是Svelte的最新版本,引入了一些新的特性和改进。

在Svelte中,getContext是一种用于从父组件传递数据到子组件的机制。它允许父组件将数据存储在一个上下文对象中,并通过子组件的getContext函数将该数据传递给子组件。

在Svelte中,getContext函数用于从上下文中获取数据。它接受一个参数,该参数是一个上下文对象的键。如果在上下文对象中存在该键,则返回对应的值;否则返回undefined。

Svelte中的上下文对象是一个普通的JavaScript对象,可以在组件层次结构中的任何地方创建和传递。父组件可以通过将数据存储在上下文对象中,然后将该对象传递给子组件来共享数据。子组件可以使用getContext函数来获取父组件传递的数据。

使用getContext可以方便地在Svelte中实现跨组件的数据共享。它适用于需要在多个组件之间传递数据的场景,例如主题设置、用户身份验证状态等。

以下是一个示例代码,演示了如何在Svelte中使用getContext:

代码语言:txt
复制
// Parent.svelte
<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';

  const context = {
    theme: 'dark',
    user: {
      name: 'John',
      age: 25
    }
  };

  setContext(context);
</script>

<Child />

// Child.svelte
<script>
  import { getContext } from 'svelte';

  const { theme, user } = getContext('theme', 'user');
</script>

<p>Theme: {theme}</p>
<p>User: {user.name}, {user.age}</p>

在上面的示例中,Parent组件通过setContext函数将theme和user数据存储在上下文对象中。然后,Child组件使用getContext函数获取这些数据,并在界面上显示出来。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网套件:https://cloud.tencent.com/product/iot-suite
  • 腾讯云移动推送:https://cloud.tencent.com/product/umeng
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/ue
  • 腾讯云安全产品:https://cloud.tencent.com/product/safe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

10分钟内概览Svelte 3的基础知识

Svelte2019年成为后起之秀,接下来,让我们来简单的了解一下,这个新的框架。 “ Svelte是一种构建用户界面的全新框架。...default app; 这里需要注意的是, .svelte 如果仔细观察,我们将导入一个.svelte文件,这是svelte的一个组件,第三行,我们实例化了该对象。...,从这里,我们可以svelte上下文之外将它们提供给我们的组件,因为它没有父级对象。...-- 可以有一个或者多个html/svelte 标签来让你选择--> 标签通常写普通的JS代码,标签写样式(如果你想写Scss的话,也可以进行预处理)。...所以,我们的components文件夹创建一个TodoItem.svelte文件,并且执行以下步骤: 导出一个变量,就像您在App.svelte中看到的todo那样 用todo.done 添加一个div

1.8K30
  • 一文讲透前端新秀 svelte

    本文作者:nicolasxiao,腾讯前端高级工程师 引言 本文基于笔者实际项目中应用svelte的调研报告整理而来,实际项目中,通过将 vue3 替换成 svelte,框架体积就从337.46kb...2、3年前就已经听说过 svelte 这个框架,但一直没有实际使用。...产物体积小 svelte 框架的运行时非常小,仅仅 18K,组件数量不多的场景下,其构建产物要明显优于 vue3,react等框架。很适合轻量级的项目。...脚本(script),样式(style) 与 HTML 语法结构高度一致 与 HTML是, script 里声明的所有变量,都可以模版引用。...代码的赋值语句,会被生成为数据更新逻辑。变量定义会被收集生成上下文数组。 上下文:每个 svelte 组件都会有自己的上下文,上下文存储的就是 script 标签内定义的变量的值。

    4.3K20

    Svelte 3 快速开发指南(对比React与vue)

    Harris) Svelte 没有 virtual DOM,它会被编译成最小的 “vanilla” JavaScript,并且看起来比其他库性能更好 在下面的教程,我更关注 Svelte 3 的核心概念...我们的例子,“https://academy.valentinog.com/api/link/”是默认 props,作为没有 props 传递时的后备。...Svelte 从“反应式编程”汲取灵感,并对所谓的计算值使用奇怪的语法。这些值 Svelte 3 中被称为“反应声明”。...粗略的一瞥Svelte 3 似乎只是另一种做事方式,也许比 React 更聪明。 Svelte 真正吸引人的是,它与 React 和 Vue 不同,没有 virtual DOM。...换句话说,库和实际的文档对象模型之间没有抽象:Svelte 3 可被编译为可能的最小原生 JavaScript。如果你受限制的环境运行程序,这将非常有用。

    12.2K30

    如何在Vue3使用上下文模式,React中使用依赖注入模式🚀🚀🚀

    这两种不同的设计模式,通常用于软件系统实现组件之间的数据共享和依赖管理。作为耳熟能详的常见功能,这里就不详细展开定义了,我们单纯的从使用角度去解读他们的区别。...他们通常在跨组件通信中被提到,比如,React、Svelte、SolidJS都用了Context上下文模式,Vue、Angular中使用了依赖注入模式。...但是稍微了解下就知道,同样是Context上下文模式,React的实践又与Svelte、SolidJS的实现不相同。这是因为设计模式的实现是要紧贴系统场景的需求,才能被称为优秀的设计模式。...Vue3使用上下文模式❝ 注意:这不是依赖Vue组件层级树的上下文。React的上下文系统是依赖于组件层级树的。换句话说。这是一个外部系统。...不过还是不如vue那么优雅,所以,我们稍微改造下:注入的时候,也需要提供mapper方法,这样就更加优雅了。

    37500

    新兴前端框架 Svelte 从入门到原理

    刚刚过去的2020年,Svelte满意度排行榜超越了react,跃升到了第一位。 ? 开发者兴趣度 开发者兴趣度方面,Svelte 蝉联了第一。 ?...市场占有率 如果你19年还没有听说过Svelte,不用紧张,因为svelte 当时仍是小众的开发框架,社区里仍然没有流行开来。 ?...React,我们要么使用useState钩子,要么使用setState设置状态。而在Svelte,可以直接使用赋值操作符更新状态。...和Vue, React框架的对比 构建大型前端项目时,我们选择框架的时候就需要考虑更多的事情。Svelte 目前尚处在起步阶段,对于大型项目必要的单元测试并没有完整的方案。...位掩码是一种将多个布尔值存储单个整数的技术,一个比特位存放一个数据是否变化,一般1表示脏数据,0表示是干净数据。 ?

    1.8K20

    都快2020年,你还没听说过SvelteJS?

    用过React的人可能都会体会到React并没有想象那么高效,框架有时候会做很多无用功,这体现在很多组件会被“无缘无故”进行重渲染(re-render)。...组件被重渲染是因为Vitual DOM的高效是建立diff算法上的,而要有diff一定要将组件重渲染才能知道组件的新状态和旧状态有没有发生改变,从而才能计算出哪些DOM需要被更新。...•src文件夹,这个文件夹用来存储我们的项目源代码,现在只有一个项目的主入口文件main.js和一个组件文件App.svelte。...App,将BookCard需要的参数传给该组件: // src/App.svelte ......这个问题现在还没有具体的答案,只能等后人实践的时候给出答案了,大家有兴趣可以看一下作者github上面的讨论[12]。•Ecosystem - 生态。

    3.2K10

    2024年虚拟DOM技术将何去何从?

    Vue 3:Vue的创始人尤雨溪“Vue 3的设计”中提到,他致力于寻找突破虚拟DOM的性能瓶颈。...当前非虚拟DOM框架的主力:Svelte 虚拟DOM的现状 目前,虚拟DOM仍然是主流框架的主导技术。React持续迭代探索更合理的调度模式,而Vue3专注于优化虚拟DOM的diff算法。...理念:“最好的API是根本没有API” —— Rich Harris Svelte3Svelte3经过重大改变,成为一个更轻量级、语法更简洁、代码量更少的JavaScript框架,用于实现响应性。...当前临时存储全局上下文中的“观察者”Listener(指引用SignalState的地方)将被放入其观察者数组,观察者源将指向当前信号,实现数据绑定。最后,返回相应的SignalState值。...因此,没有最好的技术。在历史上不断修改和优化的过程,虚拟 DOM 的速度并不慢。不断探索是对技术最大的尊重。 结束 2024年的前端框架领域,我们看到了多样化的技术选择和不断的创新。

    48210

    从Todolist入门Svelte框架

    我使用todolist时通常是希望通过todolist做一个短期规划而不是长期规划,来规划我接下来3h或者今天整天或者近几天我希望做的事情,我记录的事情也不会有7件8件那么多,长期规划是确实更需要一个分组标签功能...框架在html写if-else判断,点击状态按钮使当前todo对象的状态值改变,然后根据不同的状态值加载不同的html标签,写的过程遇到一个神奇的问题 {#if user.loggedIn} <button...indexeddb缓存历史数据 需求:因为这是个纯前端实现的方案,而数据如果存在js那么每次运行项目的数据都没有办法保存,因此想到用indexeddb来做数据缓存。...实现:此前我并没有使用过indexeddb阅读文档的过程还是比较生疏,没怎么接触过数据库的内容,大概了解了之后实际写的过程还是遇到了相当多的问题,再加上国庆7天因为准备篮球队11月初的省赛早上9...Svelte尚未成熟 ​ 虽然Svelte具有上述诸多优势,但在开发大型项目时,Svelte没有像AntDesign、ElementUI这样成熟的UI库,原生脚手架没有目录划分,原生不支持预处理器等等

    1.5K20

    尤大亲自评测 Vue3Svelte(19个组件后Vue更好!)

    (Svelte 没有运行时,Vue有运行时) 再来看看组件代码,Svelte 的 min + compressed 输出大小是Vue的~1.7倍。...Svelte 单组件普通模式下比 Vue3 单组件约大70% , SSR 模式下大110% (公众号作者秋风注:其实这里尤大说的有点问题,这个70%指的是当前 todomvc 组件的大小对比,并不代表着所有...Svelte 仍然很棒,适用于一次性组件(例如,作为自定义元素包装),但它在大规模 APP 体积大小方面实际上是它的缺点,特别是SSR。...其实对于 Svelte 这个包大小这个问题,其实很早之前 Svelte Github 也对 React 和 Svelte 进行了广泛的讨论。 ?...Svelte 确实有一个阈值会使得它在一定程度后让体积大小没有了优势,但是在一般情况下,只要不是特别复杂的后台管理应用,Svelte 应当会比其他框架体积小。

    1.9K40

    Vue 3是最佳选择吗? 耗时两周从Vue 2迁移到Svelte后:代码执行更快、体验更佳

    之所以没有考虑 React,是因为它的学习过程太耗时间,而且也不提供能开箱即用的解决方案。Vue 和 Svelte 在这方面的优势明显更大。...关于 Vue 3Svelte 哪个更好的争论一直是前端圈的热门话题,Vue 作者尤雨溪去年也 GitHub 上创建了一个仓库用来对比 Svelte 和 Vue 3 组件。... SSR 场景,这个阈值会更低。对于某个项目来说,当编写的组件大于 19 个(SSR 模式为 13 个组件),Svelte 的优势与 Vue 3 相比就不存在了。...与 Vue 3 相比,Svelte 优势明显 Sophie 的项目中,其团队认为 Svelte 与 Vue 3 相比主要有以下几点优势: 第一,Svelte 的留存率更高。...之后,技术团队开始 Storybook 创建新组件,最后由各位开发人员用 Svelte 重写自己负责的页面。

    3K30

    挑战“三大框架”的解决方案

    这意味着你不需要为框架所消耗的性能付出成本,并且应用程序首次加载时没有额外损失。你可以使用 Svelte 构建整个应用程序,也可以逐步将其融合到现有的代码。...发展趋势开发者满意度从2019年开始, Svelte出现在榜单。2020年,Svelte满意度排行榜超越了react,跃升到了第一位。...最新的《State of JS survey》Svelte 被预测为未来十年可能取代React和Vue等其他框架的新兴技术。...图片Svelte 性能还不错,至少没有我们预期的那么糟糕。PS:sveltedom 是把数据和真实dom之间的映射关系,在编译的时候就通过AST等算出来,保存在p函数。...其他本文没有涉及 Svelte 的语法,且 Svelte 的语法极其简单,官方教程学习文档也比较详细,相信大家很快就会上手语法的,这里就不做官网搬运工了。附上地址供大家参阅。

    56310

    Svelte框架:编译时优化的高性能前端框架

    `;}3. 计算属性缓存Svelte编译器会识别计算属性,并在值未变时复用旧值,避免重复计算。...beforeUpdate 和 afterUpdate: 组件更新前和更新后调用,用于渲染过程执行逻辑。...Actions: Actions是组件挂载时运行的函数,可以用于处理DOM操作、事件监听和其他复杂逻辑。Slots: Svelte的插槽机制允许父组件插入子组件的内容,实现内容分发。...挑战3:企业级应用的采纳大型组织往往倾向于选择有广泛支持和成熟生态的框架。Svelte企业级应用的采用可能受到生态和社区规模的限制。...模块化设计Svelte的组件化思想与微前端的模块化理念相吻合,每个子应用可以作为一个独立的组件库,方便在主应用按需引入。3.

    13110

    前端框架「React」 VS 「Svelte

    如果你是一个对 Svelte 充满好奇的 React 开发人员,属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样,后面将进行介绍。...handleClick = () => { count++; color = colors[Math.floor(Math.random() * 3)]; } 「React」 App.js... Svelte 项目的 src 文件夹创建一个名为 Heading.svelte 的文件。 同样的 React 项目的 src 文件夹创建新文件 Heading.js.... Svelte 项目的 src 文件夹创建新文件 Button.svelte. React 项目的 src 文件夹创建新文件 Button.js....「动态样式」 在这个应用 Button 组件介绍一个颜色值作为属性,该颜色值就是按钮的背景色。 「SvelteSvelte 的动态样式没有我期望的那么直接。

    3.5K30

    前端框架 React 和 Svelte 的基础比较

    如果你是一个对 Svelte 充满好奇的 React 开发人员,属性传递上 Svelte 没有什么新奇之处。而在接收属性时 Svelte 有点点不一样,后面将进行介绍。...= () => { count++; color = colors[Math.floor(Math.random() * 3)];} React App.js 编写 handleClick... Svelte 项目的 src  文件夹创建一个名为 Heading.svelte 的文件。 同样的 React 项目的 src 文件夹创建新文件 Heading.js.... Svelte 项目的 src 文件夹创建新文件 Button.svelte. React 项目的 src 文件夹创建新文件 Button.js....动态样式 在这个应用 Button 组件介绍一个颜色值作为属性,该颜色值就是按钮的背景色。 Svelte Svelte 的动态样式没有我期望的那么直接。

    2.2K50
    领券