我们不能将 obj 数据作为道具传递给 svelte 中的不同组件吗？

Question

所以我想将数据(对象(作为道具传递给不同的组件。我的目标是使表组件可重用。

App.svelte

<script>
import {onMount} from 'svelte';
import Tabel from './components/Tabel.svelte';
let data = [];
onMount(async () => {
try {
let res = await fetch(url); // your url
data = await res.json();
} catch(err){
throw err;
}
})
</script>
<Tabel {data} />

Table.svelte

<script>
export let data = [];
</script>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
<!-- and so on -->
</tr>
</thead>
<tbody>
{#each data as {name, age}, i}
<tr>
<th class="px-4 py-2">{name}</th>
<th class="px-4 py-2">{age}</th>
<!-- and so on -->
</tr>
{/each}
</tbody>
</table>

但是我有一个这样的错误：

rollup v2.16.1
bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './components/Tabel.svelte' from src/App.svelte
Error: Could not resolve './components/Tabel.svelte' from src/App.svelte

Answer 1

你有一个错别字。按专有名称导入表：

<script>
import Table from './components/Table.svelte';  // <- fix this
//...
</script>

<Table {data}/>