Để truyền dữ liệu từ component cha xuống component con chúng ta cần khai báo các thuộc tính viết tắt là props. Trong svelte chúng ta thực hiện điều này với từ khóa export.
Nested.svelte
<script>
export let answer;
//có thể set giá trị mặc định bằng cách
//export let answer = 'giá trị mặc định';
</script>
<p> The answer is {answer}</p>App.svelte
<script>
import Nested from './Nested.svelte';
</script>
<Nested answer={42} />Xử lý nhiều biến
Ví dụ có 1 component như sau
PackageInfo.svelte
<script>
export let name;
export let version;
export let speed;
export let website;
$: href = `https://www.npmjs.com/package/${name}`;
</script>
<p>
The <code>{name}</code> package is {speed} fast. Download version {version} from
<a {href}>npm</a> and <a href={website}>learn more here</a>
</p>Thay vì truyền từng tham số một
App.svelte
<script>
import PackageInfo from './PackageInfo.svelte';
const pkg = {
name: 'svelte',
speed: 'blazing',
version: 4,
website: 'https://svelte.dev'
};
</script>
<PackageInfo
name={pkg.name}
speed={pkg.speed}
website={pkg.website}
/>Chúng ta có thể truyền như sau:
<script>
import PackageInfo from './PackageInfo.svelte';
const pkg = {
name: 'svelte',
speed: 'blazing',
version: 4,
website: 'https://svelte.dev'
};
</script>
<PackageInfo {...pkg} />