Svelte – linking components
We will bind components with variables that are passed from child pages to parent pages and vice versa.
Before studying linking components in Svelte there should be a good understanding of the basic aspects in this framework. It is advisable to read other articles on svelte.
We have a main page, let it be a file App.svelte or Index.svelte…
Inside this file, we import the elements of three pages: the calendar, the main table, and the footer. And also some general functions from the main.js file.
import Calendar from “./app/Calendar.svelte”;
import Table from ‘./app/Table.svelte’;
import Footer from ‘./app/Footer.svelte’;
import {getFetch} from “./assets/js/main”;
// Sample when using the calendar
let selectedDate = ”
$: selectedDate && eventChoosePick()
let dones = []
function eventChoosePick() {
getFetch(‘get-dones-by-date /’ + selectedDate)…then((r) => {
dones = r;
});
}
script>
<div class=“page”>
<Calendar bind:selectedDate> Calendar>
<Table bind:dones> Table>
<Footer> Footer>
div>
$: selectedDate && eventChoosePick () – read how binding works here.
Next, we use the variable selectedDatewhich is exported from the file Calendar.svelte… This means that by changing in the Calendar.svelte file, it will also change on the parent page (on App.svelte).
But we still have to initialize it again on a new page, otherwise there will be an error. It is necessary to initialize with the correct data type once (it does not matter on which page), and then on another without the data type:
Second variable dones, is the variable that is exported from the page Table.svelte… On the current page (App.svelte), it will be modified by the first selectedDate variable. Those. when we get a new date from the calendar, we will process this date on the parent page, and then send the resulting expression to the Table.svelte page.
Why do you need to send data back and forth at all? This will be more concise, because we break the logic into parts and do not write the entire application in one file. Of course, you don’t have to send anything if you write everything in one file, but this is not our way.
Now how are variables exported.
In the Table.svelte file:
<script>
export let dones = [];
script>
The same is in the Calendar.svelte file:
<script>
export let selectedDate = ”
script>
You need to understand that something is happening with these variables in these files.
For example, from the file Calendar.svelte variable selectedDate will go to the parent file App.svelte with the value that will be assigned to it in the Calendar.svelte file.
And the variable dones will not leave the file anywhere Table.svelte… More precisely, we can use the value of this variable in the parent component, but the main task is the opposite. The main task is to send this variable back to Table.svelte.
Additional Svelte Linking Example
File structure:
Main.svelte
..Calendar.svelte
..Table.svelte
In file Main.svelte 2 other files are included:
Calendar.svelte and Table.svelte…
In file Main.svelte the variable is initialized like this:
In files Calendar.svelte and Table.svelte the variable is exported:
To transfer data to a variable dones from file Calendar.svelte in Table.svelte we link these files in a file Main.svelte using a variable bind: dones with the following construction:
Now if we change the variable dones in file Calendar.svelte, then it will change in the file Table.svelte…
