数据对象不在svelte组件中呈现
是指在svelte组件中没有直接展示数据对象的情况。在svelte中，组件的数据通常通过绑定到组件的属性或使用响应式声明来实现。
当数据对象不在svelte组件中呈现时，可以考虑以下几种情况：
- 数据对象在组件外部管理：数据对象可以在组件外部进行管理，例如在父组件中定义并传递给子组件。这样可以实现数据的共享和传递，子组件可以通过props属性接收并使用这些数据。
- 数据对象通过API获取：数据对象可以通过调用API来获取，例如通过网络请求获取远程数据。在svelte组件中，可以使用fetch或axios等库来发起网络请求，并在获取到数据后进行展示。
- 数据对象通过状态管理工具管理：可以使用状态管理工具（如Redux、MobX等）来管理数据对象。这些工具可以帮助在组件之间共享和同步数据，使得数据对象可以在需要的组件中呈现。
无论数据对象在何处，svelte提供了灵活的机制来处理数据的展示和更新。通过使用svelte的响应式声明、绑定和事件处理等特性，可以轻松地将数据对象与组件进行关联，并在组件中进行展示和操作。
对于svelte组件中数据对象不在组件中呈现的具体应用场景和优势，需要根据具体情况进行分析。在实际开发中，可以根据需求选择适合的数据管理方式，并结合腾讯云提供的相关产品来实现数据的存储、处理和展示。
腾讯云提供了多种云计算相关产品，例如云数据库、云服务器、云存储等，可以根据具体需求选择适合的产品。具体的产品介绍和链接地址可以在腾讯云官方网站上查找。
相关·内容
2回答
在Svelte组件中放置元素意味着什么？例如：此代码：
const target = document.createElement('div');
// render the component in the new element
const sample = new Sample({ target });
就像这里，在给定的链接代码中，作者正在这样做：
这是干什么用的？是把Svelte组件放进div里吗？在Svelte组件的构造函数中放置元素是Svelte语法吗？
浏览 1提问于2019-09-12得票数 2
回答已采纳
在这种情况下，当打开页面时，会通过从组件内部绑定到值来设置父页面中未定义的绑定值。
但是，当值被更改并通过{#key}块重命名组件时，父元素中的值不会再次重置，而是保留更改后的值，然后在重命名的组件中设置该值。
为什么绑定在这种情况下不起作用？这是由于第一次安装组件的顺序造成的吗？
App.svelte
<script>
import Comp from './Comp.svelte'
let value
let rerender=true
</script>
{#key rerender}
<Comp bind:va
浏览 10提问于2022-04-21得票数 0
回答已采纳
2回答
我想用Svelte中的switch case语句有条件地呈现组件，如下所示：
// index.svelte
<script>
import TextContent from './components/text-content.svelte'
import { someData } from './api/some-data.js'
const ContentSwitch = (data) => {
switch (data._type) {
case 'block':
浏览 4提问于2021-10-25得票数 3
我还没有在svelte 3中找到这个特性。我希望它是这样的..
App.svelte
<Error>
<p>Can't connect to the server!</p>
</Error>`
Error.svelte
<div>{props.children}</div>
我想让App.svelte显示：
<div><p>Can't connect to the server!</p></div>
我只知道如何使用React的props.childre
浏览 9提问于2019-07-17得票数 9
回答已采纳
1回答
我的preload函数似乎没有运行(我的pages变量不是作为导航组件的道具提供的)。在_layout.svelte中
<script>
import Nav from "../components/Nav.svelte";
</script>
<Nav />
<main>
<slot />
</main>
在Nav.svelte中
<script context="module">
export async function preload(page)
浏览 1提问于2020-12-01得票数 3
我正在接收来自无头CMS的原始html片段，我需要在Sapper应用程序中按原样呈现。
这也包括将开始标记和相应的结束标记作为两个HTML片段接收的情况，在这两个标记之间添加了Svelte组件。
<script>
import MyComponent from './MyComponent.svelte'
// example snippets coming from headless CMS
const prefix = '<p class="test">'
const suffix
浏览 0提问于2020-02-25得票数 2
是否可以动态导入预编译的svelte组件或整个svelte应用程序。
我在svelte3中找到了这种方法，但在文档中什么也没有找到：
我想在一个页面上组合几个独立的(托管的) Svelte应用程序到一个更大的svelte-app (微前端)。目标是，每个子应用程序都可以在任何地方独立部署和托管(可能是自己的docker容器)。并且任何更改都应该在聚合器应用程序中可见，而无需重新编译它。
我想我想做这样的事情：，但没有其他框架，这会毁了我的应用程序和组件。
我不想使用自定义组件，因为Shadow DOM的样式不灵活。我必须能够改变css在一个全局样式表。
有谁有主意吗？
谢谢您:)
浏览 4提问于2019-07-12得票数 0
假设我有一堆数据文档，它们是S3中的JSON文档，每年一个。我在Sapper中通过dir结构定义了一条路由：
├── routes
│ ├── _error.svelte
│ ├── _layout.svelte
│ ├── about.svelte
│ ├── data
│ │ ├── [year].svelte
以及我的script块中的代码：
let yearData;
onMount(async () => {
const f = await fetch(yearDataUrl(year), {
headers: { '
浏览 0提问于2019-08-24得票数 1
回答已采纳
1回答
我有一个SomeClass.ts，类似于：
class SomeClass {
constructor () {
console.log('created someclass')
}
}
export default SomeClass
，它编译为SomeClass.js
'use strict'
exports.__esModule = true
const SomeClass = /** @class */ (function () {
function SomeClass () {
console.log('creat
浏览 3提问于2022-06-17得票数 0
回答已采纳
我对SvelteKit相当陌生，无法解决与插槽相关的问题。我正在尝试做一个应用程序布局，其中有一个主和详细窗格，其中主和详细的内容是根据路线确定。
假设我有这样一个__layout.svelte文件：
//-------------------------
// routes/__layout.svelte
//-------------------------
<main>
<slot name="master" />
<slot name="detail" />
</main>
然后我有另一个类似的页面
浏览 16提问于2022-03-29得票数 2
回答已采纳
1回答
众所周知，我们在useEffect中放置了一个依赖数组。但是，当我们在svelte中使用相当于onMount的useEffect方法时，它不需要依赖数组。有人能解释一下为什么。
//// React ////
useEffect( ()=>{
// side effects goes here //
},[])
//// Svelte ////
onMount( ()=>{
// side effects goes here //
})
浏览 1提问于2022-09-20得票数 0
我在一个网站上工作，在那里使用Svelte和svelte-routing库。svelte-routing库有一个名为navigate(path)的方法。我只需单击一个按钮就可以使用此函数，它可以完美地工作。但在我的routeHandling.js文件中，它并没有像预期的那样工作。我可以看到它在浏览器中设置了url，但它停留在同一页面上，所以我必须按F5 (重新加载页面)来加载页面。 import {navigate} from "svelte-routing";
import * as axios from "axios";
export function
浏览 32提问于2021-09-16得票数 0
我试图循环一个数组来呈现具有type值的组件。
<script>
import One from './One.svelte';
import Two from './Two.svelte';
import Three from './Three.svelte';
const contents = [
{type: 'One'},
{type: 'Two'},
{type: 'Three'},
{type: 'One'}
]
</script&
浏览 2提问于2021-01-10得票数 3
回答已采纳
2回答
在斯维特传递道具
、、
我正在尝试使用Svelte、Svelte路由和Firestore来实现一个相当标准的博客应用程序，但我想我误解了道具如何在组件之间传递的一个基本部分。
我将我的初始代码建立在Fireship.io上的优秀教程之上--它按照教程：工作。
从这里我添加了Svelte - --并且我尝试添加一个视图路由。
App.svelte的相关部分：
<Router url="{url}">
<Navbar user="{user}" />
<div>
<Route path="posts/:i
浏览 2提问于2019-06-23得票数 3
回答已采纳
我正在开发一个使用Laravel + Svelte + materializecss的产品。
我使用Svelte组件作为自定义标记，使用svelte: options。
示例：<svelte: options tag = "custom-tag" />
如果试图在此组件中加载materializecss，则必须每次在组件中运行import。父HTML调用materializecss。
为什么会这样呢？如果你能告诉我，我会很感激的。
index.blade.php
<html>
<head>
<!-- ↓ materializec
浏览 7提问于2020-10-21得票数 0
回答已采纳
1回答
我正在使用svelte与svelte-温泉路由器。
我有我的案子
<script>
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
</script>
{#if condition}
<Component1 {...props1} />
{:else}
<Component2 {...props2} />
{/if}
有什么更好的
浏览 2提问于2021-04-30得票数 0
回答已采纳
我有这个基本的应用程序，有一些组件有一个公共的load方法。对于某些操作，我想在当前的svelte:component上调用该方法，但是我不知道如何获得对组件实例的引用。一个人怎么能这么做？
<script>
import router from 'page'
import Wines from './pages/Wines.svelte'
import Entry from './pages/Entry.svelte'
import TitleBar from
浏览 2提问于2020-05-25得票数 3
回答已采纳
使用svelte文档中的onMount照片示例，我可以使用自己的rest (还有另一个待做的.)显示数据。我改变了它，把照片html放在一个单独的组件中，它就能工作了。这是App.svelte
<script>
import { onMount } from 'svelte'
import Photos from './Photos.svelte'
let photos = []
onMount(async () => {
con
浏览 0提问于2021-04-29得票数 1
回答已采纳
如果我在应用程序根部的组件中使用预加载函数，它为什么从来不运行？从，我认为这曾经是一个bug，但被修复了。
所以我很难理解为什么这是不能运行的：
_layout.svelte
import someComponent from 'someComponent.svelte';
<someComponent />
someComponent.svelte
<script context="module">
export async function preload({ params, query }) {
console.log
浏览 5提问于2020-10-23得票数 0
回答已采纳
1回答
我正在用Svelte做一个非常简单的路由器。通过传递currentHash (例如：/#Dashboard)将页面作为组件导入： import Dashboard from './Dashboard.svelte';
import About from './About.svelte';
import NotFound from './404.svelte';
let component = currentHash; // 'Dashboard' as string 稍后，我将使用以下代码加载组件： <svelte:co
浏览 15提问于2020-11-10得票数 0
回答已采纳
如何在svelte代码中添加自定义函数调用？例如：在DataTableTest.svelte中，我希望添加cellFormatter函数并使其自动调用，并在以下为守则：
ABC.svelte
import DataTableTest from "./DataTableTest.svelte";
let columns = [
{
label: "ABC",
property: "abc"
},
{
label: "Items",
property: "
浏览 1提问于2019-08-06得票数 5
回答已采纳
我使用的是svelte选项卡组件，在这里描述如下：
在两个选项卡中，我有以下svelte模板代码：
<TabPanel>
<Filter/>
<div id='to-filter' class='scroll-container'>
{#each value.items as item, i}
<Item
itemFilter={item.name}
itemDay={item.item
浏览 0提问于2020-05-31得票数 4
回答已采纳
1回答
我正在试用Svelte (来自Vue3 3/类星体背景)，我很难在导出的辅助函数中使用localStorage。
如果我在src/libs.js中有以下代码
export const callZinc = () => {
console.log(`hello ${localStorage.getItem("login")`)
}
编译失败
localStorage is not defined
ReferenceError: localStorage is not defined
at Module.callZinc (/src/libs.js:4:53)
浏览 2提问于2022-06-18得票数 0
2回答
我有一个Svelte & Sapper应用程序，在该应用程序中，我使用Svelte可写存储来设置一个带有初始空字符串值的变量：
import { writable } from 'svelte/store';
export let dbLeaveYear = writable('');
在我的Index.svelte文件中，我导入了这个变量，然后计算出这个变量的值并对其进行设置(如果与此相关，我将在‘Index.svelte’的onMount函数中这样做)：
<script>
import {dbLeaveYear} from "
浏览 3提问于2020-04-12得票数 0
回答已采纳
1回答
非常简单的尝试，从商店得到反应vars。在我的App.svelte里
import { config } from "./store/config.js";
$: config = $config || {};
在我的./store/config.js
import { writable } from 'svelte/store';
export let config = writable({
languageCode: "NL"
});
不过，简单的console.log(config);在App.svelte中会导致“未定义”。
的规则6
浏览 4提问于2022-10-25得票数 0
1回答
我对Svelte非常陌生，我正在尝试制作一个web组件，该组件调用Google的库。我在Svelte组件上加载了库，但是当我想将自动完成函数传递给我的输入时，它会显示错误: InvalidValueError:不是HTMLInputElement的一个实例。
这就是我迄今为止尝试过的：
<svelte:head>
<script
defer
async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaZc7Jr7pDoK3TWcDiv-SjqiJ0iKz15Go&li
浏览 3提问于2022-03-09得票数 0
2回答
我是否可以使用Svelte生成“初始”HTML文件？
我用的是Django，Webpack和Tailwindcss。我想在我的前端使用Svelte，但我不想放弃使用服务器端呈现的速度(Django模板)。如果我最初展示的是一个引导HTML页面，该页面引入bundle.js并在客户端构建DOM，那么浏览器只能在加载JS文件之后才开始下载图像。
与最初呈现的HTML已经包含图像链接相比，浏览器开始与JS一起下载它们，从而使页面加载速度更快。
我不想使用Sapper作为我的应用服务器，我想继续使用Django。
浏览 6提问于2020-07-23得票数 2
我有一个反应应用程序，我正在检查移动到svelte的可行性。
我不直接呈现给页面，而是创建包，包具有导出方法，它可以帮助谁调用API函数。
例：-
const render: Render = (containerId, options) => {
const container = document.getElementById(containerId)
ReactModal.setAppElement(container!)
const root = createRoot(container!)
root.render(
<StrictMode>{
浏览 6提问于2022-07-27得票数 0
回答已采纳
1回答
我问这个问题通常是因为我有兴趣了解这些东西是如何工作的，而不仅仅是解决我眼前的问题。
尽管如此，没有什么比具体问题更能说明问题了，所以这里是我要坚持的地方，如果细节有帮助的话。我试图获得“液态文本”库Blotter.js，在一个SvelteKit项目中工作，但似乎只能让它使用Svelte (没有工具包)。
感觉好像我搞错了。如果您愿意给我一些真正的仁慈，请尝试分叉我的小测试项目&运行npm run dev，看看相同的代码如何在一个环境中工作，而不是在另一个环境中：
Svelte
SvelteKit
Blotter is not defined：↑给出错误
这里是布洛特的官方使用说明
浏览 2提问于2022-11-04得票数 2
1回答
我有这个。
let items = [
{ name: 'John', age: 27, icon: 'svg?' },
{ name: 'Peter', age: 54, icon: 'svg?' }
]
然后：
{#each items as item}
<div>{item.name}</div>
<div>{item.icon}</div>
{/each
我使用Svelte并导入svg图标
import Something from '../svg/something
浏览 5提问于2022-11-02得票数 0
回答已采纳
我一直在尝试在Svelte中使用Ag-Grid。我知道使用这个网格库的主要问题是它需要绑定到一个dom元素，而这个dom元素在代码执行时可能并不存在。例如： // lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid'); 在这种情况下，#myGrid元素还不存在。 我尝试创建一个元素，然后将其放在Svelte组件的HTML部分，如下所示。 let eGridDiv = document.createElement("DIV"
浏览 9提问于2019-05-07得票数 5
回答已采纳
1回答
超细长槽
、、
选择下一个场景：
./__layout.svelte
<script>
const hi = "hi";
</script>
<h1>{hi}</h1>
<slot />
<slot name="safely" />
./index.svelte
<h1>
This is my awesome index page!
</h1>
./路由/到/某物/索引.something
<p>
in this page we have safely co
浏览 7提问于2022-07-19得票数 0
在下面的组件中(称为“注释屏幕”)，组件DocPicker允许用户设置变量selectedDoc，而变量selectedDoc又应该更新两个组件：Form和SearchResultView。
<script lang="ts">
import type { AppScreen, QuestionGouv } from '../../types.js';
import Screen from '../../Screen.svelte';
import DocPicker from './DocPicker/DocPi
浏览 3提问于2021-08-01得票数 0
回答已采纳
我正在做一个个人项目，想让我的<Desk>组件的可移动网格。所有组件都按我所期望的那样工作，但是，当使用我安装的"svelte- grid“库时，我无法让程序形成<Desk>组件的网格。 我正在尝试创建一个网格，它显示来自指定student的每个period的<Desk>。\ 指向我获得-> https://svelte-grid.vercel.app/usage库的位置的链接 教室 <script>
export let roster
import Desk from "./Desk.svelte
浏览 16提问于2021-08-07得票数 0
我正在缓慢但肯定地将一个jquery项目迁移到Svelte，但是在jquery中，一些特性(比如数据)要成熟一些。因此，在引用时，我测试了Svelte的反应性特性，方法是从服务器端调用更新一个对象数组，然后重绘表。其目的是使实现更接近本地Svelte。
但是，尽管我得到了要呈现的表，但当我用Svelte声明变量插入jquery特性时，在收到错误：Uncaught (in promise) TypeError: e.parentNode is null之前，我只需要更新一次表。
有人能帮我理解一下为什么会发生这种事吗？
// Load.svelte
<script context="
浏览 13提问于2022-07-03得票数 2
回答已采纳
我有一个用于Address的svelte组件，用户可以通过单击一个按钮来添加多个地址(主要地址、次要地址、其他地址)。我不知道用户会添加多少地址。我很难用Svelte来模拟这个。我发现的最接近的东西是svelte:component，但它只允许一次加载一个组件。
浏览 2提问于2019-12-17得票数 1
回答已采纳
我已经查看了[<svelte:component>] ()的文档，但看起来我必须在编译时对所有可能的模板进行import。
在Svelte中是否有可能从类似于基于用户操作的fetch()调用中加载任意数量的模板？然后给它注入数据？
如果我计划在初始加载之后更新<slot>，那么使用这种方法是否会效率低下呢？
浏览 0提问于2018-05-11得票数 5
回答已采纳
我有一个简单的PrimaryButton.svelte组件，它只包含"HTML“(没有脚本或样式标记)，看起来像这样： <button class="btn-primary btn accent--br">Primary button</button> 然后我将组件导入到App.svelte中，它在浏览器中呈现得很好，但我也希望显示组件的HTML代码。 App.svelte看起来像这样： <script>
import PrimaryButton from "./components/Buttons/PrimaryB
浏览 36提问于2021-05-01得票数 1
回答已采纳
我的Svelte组件导入如下可读的存储：
import { classes, locations, schedule } from 'stores.ts'
在stores.ts中，我希望构建一个URL，以便使用page.host从$app/store动态获取。
// Note: this is not a Svelte component; it's stores.ts
import { readable } from 'svelte/store'
import { getStores } from '$app/stores'
const
浏览 7提问于2021-05-29得票数 2
回答已采纳
这个回退component={NotFound}是我为错误页找到的唯一方法，但返回一个包含服务器代码200的组件页，我想得到代码404。
有一种方法是不使用吗？
import { Router, Link, Route } from "svelte-routing";
import NotFound from "./components/NotFound.svelte";
...
<Route path="/">
Welcome <hr />
浏览 4提问于2022-05-13得票数 0
我试图将Svelte中的状态控制函数从组件提取到单独的组件(或函数)，以便重用和解耦，比如function钩子。
我试图按下面的方式封装一个计数器增量，但它不起作用。反应性丢失，计数不会增加。如何正确提取Svelte中的状态控制功能？
useIncrement.svelte
<script context="module">
import {onMount} from 'svelte';
function useIncrement(){
let count = 0;
onMount(() => {
const interval
浏览 0提问于2021-02-26得票数 1
2回答
我知道我可以通过使用bind:this获得对DOM元素的引用 <script>
import { onMount } from "svelte";
let root;
onMount(() => {
// root is div
});
</script>
<div bind:this="{root}">
content
</div> 如何获得对组件根元素的DOM节点的引用？ Wrapper.svelte:
<div class="root">
浏览 30提问于2020-07-06得票数 4
2回答
我对svelte环境非常陌生，我有一些反应代码，为了学习目的，我尝试将它们转换为svelte。
在react中，我们可以传递一个字符串或将Node作为道具。
<TabPane
name="profile"
title={<img src="images/profile.svg" alt="Profile" />}
key="1"
>
{/** some code **/}
</TabPane>
我试图在svelte中使用相同的代码，但是它会引发一个错误。
浏览 0提问于2021-06-05得票数 8
回答已采纳
我正在学习如何使用Routify连接一些路线和链接。我需要帮助。
在Routify文档上写着：
“链接可以通过一系列不同的方式来处理。这可能是最简单的方法”。
via：
然后给出了这个例子：
<script>
import {isActive, url} from '@sveltech/routify'
const links =
[
['./index', 'Home'], //add index if you don't want siblings to be considered children
浏览 13提问于2020-08-07得票数 1
回答已采纳
我目前正在使用Svelte和Sapper的网站上工作。我正在使用Svelte转换来动画一些页面元素。每当我更改到新的页面路由时，转换就会正确地显示出来。但是当我第一次加载页面时，它们没有动画。
Svelte如何处理页面加载的动画？我是否需要使用onMount()来使它们正常工作？
浏览 5提问于2020-10-16得票数 8
回答已采纳
我现在正在潜入Svelte(工具包)的世界，我现在需要一些帮助来做我的决定。
我将使用Svelte作为后端，因此我尝试从Flask (类似于中)提供服务，而且在开始时，它看起来很好。
但是我更喜欢Sveltekit而不是Svelte，所以我试着用和烧瓶一样的方式来服务Sveltekit，但是我只在页面上看到了"%svelte.head% %svelte.body%"文本。我需要改变什么？
为什么要用酒瓶而不是斯维特来供应斯维特基特呢？例如，我更喜欢Sveltekit的路由，而不是Svelt。但是，我看不到使用终结点的点，因为我可以直接从.svelte页面获取Flask，而不是将
浏览 13提问于2022-04-13得票数 1
回答已采纳
1回答
我有一个简单的web组件，用简单的Javascript编写。它的使用：
<layer-list>
<item color="#0069C6">Layer 1</item>
<item color="#EF4627">Layer 2</item>
<item color="#8F17A0">Layer 3</item>
</layer-list>
它会从构造函数中操作它的内容，项目。它在一个普通的HTML页面上工作。但是，将
浏览 4提问于2022-09-22得票数 0
回答已采纳
向读这篇文章的人问好。首先，我想说，我对Svelte和整个组件框架都非常陌生。这实际上是我开始学习的第一个框架。
我已经读过一篇教程，在本教程的某些部分，我喜欢做一些小的东西，包括我刚刚学到的东西，以进一步熟悉这些材料。
最近，我开始学习组件和组件道具，并决定创建一个应用程序，该应用程序接受表单中的各种输入，然后将该表单通过登录到控制台来提交。
正是在这样做的过程中，我注意到了一些有趣的行为，我成功地在一个单独的应用程序中复制了这些行为，以便编写这个问题。
App.svelte
<script>
import Name1 from "./lib/Name1.svelte
浏览 0提问于2022-07-07得票数 2
回答已采纳
我试图在Svelte模板中使用包含减价的字符串，并使用作为Svelte组件的一部分，我在App.svelte中有以下代码
<script>
import { compile } from 'mdsvex';
import Counter from './lib/Counter.svelte'
const transformed_code = compile(`
# Hello world
This is a paragraph
<Counter />
`, {});
</script&
浏览 9提问于2022-08-17得票数 1
2回答
我的朋友使用打字稿和Svelte制作网络应用程序。我问他如何选择什么东西应该是类型记录文件，而什么时候应该是Svelte文件；他说，“在一个svelte文件中，它是组件的每个实例的代码”，而类型记录是“一个常规的file...global，每个应用程序一个。”
这对我来说是合乎逻辑的，但我仍然无法理解我什么时候应该使用哪一种。是否可以使用以下方法制作相同的web应用程序：
只输入文本文件，只显示Svelte文件，是这两种文件的混合？
如果是的话，那为什么备选方案3更优越呢？如果没有，哪些选项是可能的，哪些选项是不可能的，为什么？最好放一放，Svelte文件不能做的类型记录文件可以做什么(如果有
浏览 1提问于2021-11-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
