Будем связывать компоненты переменными, которые передаются из дочерних страниц в родительские и наоборот.
Прежде чем изучать связывание компонентов на Svelte должно быть хорошее понимание базовых аспектов в этом фреймворке. Желательно ознакомиться с другими статьями по svelte.
У нас есть главная страница, пусть это будет файл App.svelte или Index.svelte.
Внутри этого файла мы импортируем элементы трех страниц: календаря, основной таблицы и футер. А также какие-то общие функции из файла main.js.
import Calendar from "./app/Calendar.svelte";
import Table from './app/Table.svelte';
import Footer from './app/Footer.svelte';
import {getFetch} from "./assets/js/main";
// Выборка при использовании календаря
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() — здесь читайте как работает связывание.
Далее, мы используем переменную selectedDate, которая экспортируется из файла Calendar.svelte. Это значит, что изменяясь в файле Calendar.svelte она будет меняться и на родительской странице (на App.svelte).
Но мы все равно должны её инициализировать еще раз на новой странице, иначе будет ошибка. Надо инициализировать с правильным типом данных один раз (не важно на какой странице), а затем на другой можно без типа данных:
Вторая переменная dones, является переменной которая экспортируется из страницы Table.svelte. На текущей странице (App.svelte) она будет изменяться за счет первой переменной selectedDate. Т.е. когда мы получим новую дату из календаря, мы обработаем эту дату на родительской странице, а затем полученное выражение отправим на страницу Table.svelte.
Теперь как же экспортируются переменные.
В файле Table.svelte:
export let dones = [];
</script>
Тоже самое и в файле Calendar.svelte:
export let selectedDate = ''
</script>
Надо понимать, что в этих файлах с этими переменными что-то происходит.
Например, из файла Calendar.svelte переменная selectedDate уйдет в родительский файл App.svelte со значением, которое ему будет присвоено в файле Calendar.svelte.
А переменная dones никуда не будет уходить из файла Table.svelte. Точнее, значение этой переменной мы можем использовать в родительском компоненте, но главная задача противоположная. Главная задача эту переменную отправить обратно в Table.svelte.
Дополнительный пример связывания на Svelte
Структура файлов:
..Calendar.svelte
..Table.svelte
В файле Main.svelte подключаются 2 других файла:
Calendar.svelte и Table.svelte.
В файле Main.svelte переменная инициализуется так:
В файлах Calendar.svelte и Table.svelte переменная экспортируется:
Для передачи данных переменной dones из файла Calendar.svelte в Table.svelte мы связываем эти файлы в файле Main.svelte с помощью переменной bind:dones следующей конструкцией:
<Table bind:dones></Table>
Теперь, если мы изменим переменную dones в файле Calendar.svelte, то она поменяется и в файле Table.svelte.
