根据有关 Props的Svelte 文档，我使用 props 将父组件的引用传递给子组件。
道具，“属性”的缩写，是您将数据从父组件向下传递到子组件的方式
这正是我想要做的。这是带有我的代码的 Svelte REPL，也在下面复制：
我的父母是App.html：
<div class='widget-container'>
<Widget foo bar="static" {baz}/>
</div>
<script>
import Widget from './Widget.html';
export default {
data: function(){
return {
baz: 'click me and check the console'
}
},
components: {
Widget
}
};
</script>
子组件是Widget.html：
<p>foo: {foo}</p>
<p>bar: {bar}</p>
<p>baz: {baz}</p>
<script>
export default {
oncreate: function(){
window.document.body.addEventListener('click', function(event){
console.log(`Clicked!, ${baz}`)
});
}
}
</script>
多亏了 props，HTML<p>元素可以清楚地引用父元素。但是，如何在子组件的 …
我构建了一个简单的 Banner 组件，它被导入到 _layout.html 中。它公开了 5 种方法（dismiss、info、warning、...）。
目前我正在使用商店来跟踪这些方法，如下面的 _layout.html 所示。
_layout.html
<main>
<Banner ref:banner/>
<svelte:component this={child.component} {...child.props} />
</main>
<script>
export default {
components: {
Banner: '../components/Banner.html',
},
oncreate() {
this.store.set({
Banner: {
dismiss: this.refs.banner.dismiss,
danger: this.refs.banner.danger,
info: this.refs.banner.info,
success: this.refs.banner.success,
warning: this.refs.banner.warning
}
})
}
}
所以我可以从应用程序的任何部分调用它们，如下所示：
博客.html
...
this.store.get().Banner.success('Post saved!')
} catch (err) {
this.store.get().Banner.danger(err)
}
...
这工作正常，但我想知道这是否是最好的 Svelte 方式。
假设我有这个主要的应用程序：
import Field from '../components/Field.svelte';
var fields = [
{
id: 'Check',
type: 'CheckBox',
value: false,
},
{
id: 'Text'
}
];
var components = {};
$: console.log(components);
</script>
<style>
</style>
<form>
{#each fields as item}
<Field {...item} bind:bind={components[item.bind]} bind:this={components[item.id]}></Field>
{/each}
</form>
我有两个组件，CheckBox和TextArea，都只实现 HTML 输入，而 Field 组件是这样实现的：
import CheckBox from './CheckBox.svelte';
import TextArea from './TextArea.svelte';
export let attributes = {};
export let type = 'TextArea';
export let value = '';
export let id;
export let bind; …我在一个有多个项目的小组中工作，每个项目都是用不同的框架编写的。我们想要一些独立的小部件，它们的行为和外观是标准的，但可以在任何系统中使用。我认为 Svelte 听起来是个不错的选择，因为它不需要在前端添加框架。但是我找不到任何说明 Svelte 可以在其他系统中使用的内容；它必须是一个全 Svelte 应用程序才能拥有 Svelte 组件。
那是对的吗？或者有什么方法可以将 Svelte 组件嵌入到另一个系统中？
我想创建一个使用/导入静态图像的 svelte 组件（基于 webpack）。我如何确保图像被正确导出，即使用我的组件的苗条应用程序也能看到图像？
在我的组件中，我尝试导入图像并使用 webpack 的文件加载器：
import image from "./image.jpg";
和
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
}
这有效，图像包含在 dist 文件夹中，但在这种情况下，我还需要向主 svelte 应用程序添加一个文件加载器，这是我想避免的额外要求。主应用程序应该只需要导入我的组件。
这是可能的还是以上已经是推荐的方法？
我是第一次探索 SvelteKit，我构建了我的第一个简单应用程序，我想将其作为静态页面部署到我的 Apache 服务器
据我了解适配器静态是可行的方法，所以我安装了它并将我的svelte.config.js文件更改为：
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter({
paths: { base: "/PERSONAL_PATH" },
fallback: 'index.html',
precompress: false,
})
}
};
export default config;现在：
运行npm run build没有任何错误，问题是当我检查index.html页面的所有依赖项（或者样式表和 JS 文件的 URL，如果你愿意的话......）时，有两个问题，如下所示：
PERSONAL_PATH我希望的文件夹中<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="./favicon.png" />
<meta …我想使用在组件的多个实例之间共享的代码来启动每个组件内的代码。
我尝试使用反应式语句来做到这一点：
<script context="module">
let what = 0;
</script>
<script>
export let number;
$: if (what === number) [...]
</script>
但对 的更改what不会触发该反应语句的重新运行。
为什么这个 REPL 不起作用，我该如何修复它？
https://svelte.dev/repl/38b94490982f4f3c80644fd364b50723?version=3.16.0
调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我怎样才能做到这一点？
我有一个模态组件，我希望能够在用户单击 x 按钮时销毁它，我还有一个通知弹出窗口，它会在一段时间后自行销毁，但我想让用户能够关闭它x 按钮也是。我知道我可以将事件传递给组件，但我认为如果组件是自毁的会更好。对于这种情况，也可能有更好的设计，但这就是我的想法，其他指针将不胜感激。
所以基本上我正在使用 Svelte 尝试启动一个快速应用程序，该应用程序的细节并不重要，但基本上它托管了一堆嵌入式网站。请参阅此处的示例并了解可复制性：
https://svelte.dev/repl/6f3484554ef8489b9a5960487a0a1f95?version=3.47.0
我的问题是，当我向站点列表添加新的 url 和标题时，{#each}创建嵌入视图的块不会更新以反映列表的新状态，即使列表在控制台输出中明显更新。这是否与范围有关，或者是不触发组件重新分配 prop 的反应性的 Svelte 问题？
更新：某些网站不允许嵌入，因此请使用https://wikipedia.org作为安全测试网站。
如果你用 wiki 地址替换站点列表中的硬编码 URL，它应该可以正常工作。{#each}我基本上希望在块创建新SiteView组件时弹出一个新窗口
svelte ×10
svelte-component ×10
javascript ×2
svelte-3 ×2
embed ×1
frameworks ×1
html ×1
svelte-2 ×1
sveltekit ×1
typescript ×1
webpack ×1