标签: svelte-component

我不知道为什么这个不更新。我对 Svelte 比较陌生，但我知道使用 thing = thing 方法强制更新对象数组。

不过，我不确定为什么这不会重新渲染？我首先将其作为矩阵，我认为可能有一些嵌套破坏了它，但现在这实际上只是一个平面数组。它在点击时更新矩阵，但不触发重新渲染。

<script>
    import Nested from './Nested.svelte';
    let matrix = new Array(9).fill(null)
    let turn = 0
    
    let handleChange = (index) => {
        if (matrix[index] != null) return
        let newColor = turn % 2 == 0 ? 'red' : 'blue'
        matrix[index]= newColor
        turn++
        matrix = matrix
    }
</script>
    {#each matrix as team, index}
        <Nested team={team} index={index} click={handleChange}/>
        {#if (index==2 || index==5)}
            <br />
        {/if}
    {/each}

嵌套组件：

<script>
    export let index;
    export let click;
    export let …

这里是 REPL：https://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e ?version=3.42.1

这里是代码：

应用程序.svelte：

<script>
    import {editableStore} from "./store";
    
    let name = "John"

    $: player = editableStore(name);
</script>

<h1>Hello {$player.name}!</h1>

<button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}>
    Change name
</button>

<h2>Log:</h2>

{#each $player.log as log}
    <li>{log}</li>
{/each}

商店.js：

import {writable} from "svelte/store";

const defaultStore = {
    name: "Bob",
    age: 18,
    log: []
};

export const editableStore = (name) => {
    console.log("Recreated with name:", name);

    const {subscribe, update} = writable({...defaultStore}, () => () => …

我只是在研究即将到来的项目的 Svelte 框架。

我想知道（因为这是项目要求）是否可以从服务器加载一些 HTML 字符串（使用 fetch api）并将其动态插入到 Svelte 组件中。

似乎可以使用{@html my_html_string}. 有没有办法在 HTML 字符串中包含实际 Svelte 元素的标签？

例如

<script>
    // import MyCustomElementHere....

    let my_html_string = 'Some text <MyCustomElement/> some more text';
</script>    

<p> {my_html_string} [somehow??] </p>

我认为这可能通过将组件转换为自定义元素（或其他东西）来实现，但我还没有设法完成这项工作（可能是因为我对框架还不够了解）。

有谁知道这是否真的可能？

我正在将 SvelteJs 与 svelte-spa-router 一起使用。

我有我的案例

<script>
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
</script>

    {#if condition}
       <Component1 {...props1} />
    {:else}
       <Component2  {...props2} />
    {/if}

我有更好的方法可以做到这一点吗？我可以仅在满足条件时动态导入和渲染组件吗？

目前正在制作一个 google chrome 扩展来可视化 svelte 组件，这只能用于开发模式。目前，我正在通过const svelteComponets = document.querySelectorAll(`[class^="svelte"]`);在内容脚本上使用来获取所有 svelte 组件，但它正在获取每个 svelte 元素。只获取组件的方法有哪些？