标签: svelte-component

我有一个名为WastedTime.sveltevalue的组件wastedTime。还有一个函数可以将值更改为50（在我的真实代码中，这是一个动画，但这是堆栈溢出的简化测试用例）。

为了允许从父级调用<script context="module">子函数，我使用了 Svelte 文档：

<script context="module">
    var wastedTime = 0;
    export function changeNumber(){
        console.log('changing number')
        wastedTime = 50
    }
</script>

<script>
    // Putting 'var wastedTime = 0' here doesn't work either
</script>


<h1>Wasted time: {wastedTime}</h1>

父级从onMount以下位置调用子级中的函数：

<script>

    import { onMount } from 'svelte';
    import WastedTime, {changeNumber } from './WastedTime.svelte';

    onMount(() => {
        changeNumber()
    });
</script>

<WastedTime />

问题是，既然在 中wastedTime被引用<script context="module">，它似乎无法改变wastedTime。导出的函数运行，但wastedTime保持为 0。 …

我将如何做这样的事情：

<style>
Nested {
    color: blue;
}
</style>

<Nested />

即如何将样式应用到组件的父组件？

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

商店.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，但出现此错误。任何想法都会很棒，谢谢:)

我怎样才能像在 React 中一样在 Svelte 的 HTML 中创建变量，或者这根本不是我应该如何使用 Svelte 的。我知道下面的例子很简单，但我正在考虑一种情况，我确实需要一些沉重的逻辑subArray（无法使用单行）

反应

<ul>
  {myArray.map((item) => {
    const subArray = item.items.filter(i = i > 0) // <- how can I have an intermediate variable like this in Svelte?
    return <li>{subArray.map(...)}</li>
  }}
</ul>

斯韦尔特

<ul>
  {#each myArray as item}
    <li>
        {#each <complex-logic> as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

SvelteKit v1.0.0-next.324

我有一个 SvelteKit 组件，在我的应用程序的多个位置使用，它需要从我的端点之一获取自己的数据。

我读到这个问题load，指出除非它是页面，否则我无法拥有函数。假设我无法将其作为一个页面并将其导入另一个页面，我需要能够自行将数据提取到该组件中。

<script lang="ts">
import { onMount } from 'svelte'
import type { Aircraft } from '$lib/models'
  
let aircrafts: Aircraft[]

onMount(async() => {
  aircrafts = await (await fetch('/aircrafts')).json()
  console.log(aircrafts) //<-- This works
})
</script>
  
<p>{aircrafts.length} Aircraft</p> //<-- undefined Aircraft

我的/aircrafts端点返回数据很好，并且console.log显示了数据。但在我的 HTML 中，aircrafts.length显示undefined Aircraft.

我认为这是因为onMount在设置道具之后发生并且数据实际上没有更新。

如何将数据提取到独立组件中？

是否有更简单的方法来编写以下复选框组件：

<script>
  export let disabled = false;
</script>

{#if disabled}
  <label class="checkbox" disabled>
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{:else}
  <label class="checkbox">
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{/if}

拥有<label disabled="false">是不可接受的，因为布尔玛有一个 CSS 类.checkbox[disabled]。

我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。

问题是我想在我的根元素中嵌套组件。例如：

• RootComponent（纤细的自定义元素）
  • (进口) FooComponent
  • (进口) BarComponent

如此处所述：svelte-custom-element

导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.

使用此选项设置嵌套组件按预期工作并注入根元素 ShadowDOM。问题是styles在嵌套组件中定义的没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。（不）幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。

我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。

这是REPL

正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：

REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件

所以它更像是一个代码示例而不是一个工作示例。

1. 我想知道是否有另一种方法来创建具有嵌套组件和适当样式的苗条自定义元素。
2. 有没有办法禁用删除未使用的 css？

https://imgur.com/a/zZia566

从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。

<style>元素应该.nested注入类，但它被 svelte 编译器删除。

是否有一种简单的方法可以强制重新启动 Svelte 组件？

重启用例：

• 清除 HTML 文件输入的文件列表（您无法重置路径/值）
• 使用 CSS 悬停时，选择项目后导航栏下拉折叠

也许除了重启还有其他解决方案，但让我们在这里使用组件重启。

在适用于上传用例的重启代码下方：

SomeApp.svelte

<script>
      ...
      import Upload from "./upload/Upload.svelte";

      export let uid;  // firebase uid from auth

      // restart the Upload component after the upload 
      // to clear the filename of the <input type="file" ..../>  
      // restart by making use of a dynamic (falsy) component
      let upload_component = Upload;
      let restart = false;

      $: if (restart) {
         // use a falsy to stop / destroy this component 
         upload_component = null; …

我知道我可以使用以下方法获取对 DOM 元素的引用bind:this：

<script>
  import { onMount } from "svelte";

  let root;

  onMount(() => {
    // root is div
  });
</script>

<div bind:this="{root}">
  content
</div>

如何获取组件根元素的 DOM 节点的引用？

Wrapper.svelte:
<div class="root">
  <slot />
</div>

App.svelte:
<script>
  import { onMount } from "svelte";

  let root;

  onMount(() => {
    // root is not div :(
  });
</script>

<Wrapper bind:this="{root}">
  content
</Wrapper>