标签: svelte-3

将函数绑定到按钮非常简单直接：

<button on:click={handleClick}>
    Clicks are handled by the handleClick function!
</button>

但是当我这样做时，我没有看到将参数（参数）传递给函数的方法：

<button on:click={handleClick("parameter1")}>
    Oh no!
</button>

该函数在页面加载时被调用，并且永远不会再次调用。

是否有可能将参数传递给从 调用的函数on:click{}？

我刚刚找到了一个hacky的方法来做到这一点。从内联处理程序调用该函数有效。

<button on:click={() => handleClick("parameter1")}>
    It works...
</button>

我是 Svelte 和一般编码方面的新手。我更愿意学习 SvelteKit (Svelte@Next) 而不是 sapper，因为这似乎是 Svelte 的发展方向。

对于我的个人项目，我需要支持基于 url slugs 的动态路由。我该如何在 SvelteKit 中做到这一点？例如，如果我有 /blog 目录并且需要根据其“id”提取内容，我该怎么做？

我遇到困难的部分是访问 URL slug 参数。

提前致谢。

我正在尝试/login?ref=/some/path登录后重定向到的参数：

const ref = $page.url.searchParams.get('ref') || '/dashboard';

但是我收到这个错误：

TypeError: Cannot read properties of undefined (reading 'searchParams')

我希望找到一种方法来在 Svelte 3 中迭代 #each 块一定次数。在 Vue 中，我会做这样的事情：

<li v-for="i in 3"><!-- somecontent --></li>

但据我所知，Svelte 使用 #eached 数组的 .length 属性处理循环的方式大不相同。有没有办法在 Svelte 中完成这样的事情？

{#each 3 as i}
  <li><!-- somecontent --></li>
{/if}

如何从另一家商店获取商店价值？ https://svelte.dev/repl/0ab80c2fb8e045958d844bd4b11c04a9?version=3.22.1

在示例中，我inputVal在stores.js文件中包含一个变量并在其中进行更改
set: (val) => {inputVal=val; set( val );}, and use in fn setToZero

问题：不使用变量如何直接实现inputVal？

目前，我正在开发一个项目，该项目Menu在除两个页面之外的所有页面上共享一个组件。我在根_layout.svelte文件中添加了菜单组件。现在因为不需要Menu组件的两个页面是嵌套路由。的Menu，因为他们是孩子的路线是在他们里面出现。他们是这样看的。但我认为应该有一些方法可以选择退出/离开父布局。否则我将不得不删除_layout.svelte根文件Menu并向每个路由添加组件，这对 DRY 来说太过分了。有没有办法_layout.svelte在 Sapper 中离开父母？

我需要运行一个 Svelte 应用程序并且能够在没有服务器的情况下执行它。对于其他框架，这是可能的，因为它只是 javascript，但我找不到一种方法来单击我的 index.html 并运行使用 Svelte 构建的应用程序

我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时，我想触发一个函数。

商店.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

组件.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

我想通过单击某个按钮来调用 Svelte 应用程序中的 onMount，但出现此错误。任何想法都会很棒，谢谢:)

我想使用 apply 来定义组件上的一些 css 设置，并且我还希望能够覆盖它，如下所示：

<!-- CustomButton.svelte -->
<script>
    let className = '';
    export { className as class };
    export let label = 'Click me!';
</script>

<button class="custom-button {className}">{label}</button>

<style lang="postcss">
.custom-button {
    @apply bg-blue-400 font-bold text-white rounded-lg p-4;
}
</style>

我想这样使用它：

<script>
    import CustomButton from './CustomButton.svelte';
</script>

<div class="w-screen h-screen flex justify-center items-center">
    <CustomButton class="bg-red-800" label="This is my button" />
</div>

也就是说，我希望能够覆盖我的@applied 设置

问题是来自@apply指令的设置不能被这一行覆盖

<button class="custom-button {className}">{label}</button>

我知道，为了做到这一点，我必须告诉 tailwind 在组件层（即实用程序之前）生成相应的 css。

如果我在app.post.css文件中的行之前输入相同的 css 指令，@tailwind utilities或者使用该 …