Svelte — связывание компонентов

Admin Svelte

Будем связывать компоненты переменными, которые передаются из дочерних страниц в родительские и наоборот.

Прежде чем изучать связывание компонентов на Svelte должно быть хорошее понимание базовых аспектов в этом фреймворке. Желательно ознакомиться с другими статьями по svelte.

У нас есть главная страница, пусть это будет файл App.svelte или Index.svelte.

Внутри этого файла мы импортируем элементы трех страниц: календаря, основной таблицы и футер. А также какие-то общие функции из файла main.js.

<script>
    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).

Но мы все равно должны её инициализировать еще раз на новой странице, иначе будет ошибка. Надо инициализировать с правильным типом данных один раз (не важно на какой странице), а затем на другой можно без типа данных:

let selectedDate

Вторая переменная dones, является переменной которая экспортируется из страницы Table.svelte. На текущей странице (App.svelte) она будет изменяться за счет первой переменной selectedDate. Т.е. когда мы получим новую дату из календаря, мы обработаем эту дату на родительской странице, а затем полученное выражение отправим на страницу Table.svelte.

Зачем нужно вообще туда-сюда пересылать данные? Так будет лаконичнее, мы ведь разбиваем логику на части и не пишем в одном файле все приложение. Конечно, не придется ничего пересылать, если все написать в одном файле, но это не наш путь.

Теперь как же экспортируются переменные.

В файле Table.svelte:

<script>
    export let dones = [];
</script>

Тоже самое и в файле Calendar.svelte:

<script>
    export let selectedDate = ''
</script>

Надо понимать, что в этих файлах с этими переменными что-то происходит.

Например, из файла Calendar.svelte переменная selectedDate уйдет в родительский файл App.svelte со значением, которое ему будет присвоено в файле Calendar.svelte.

А переменная dones никуда не будет уходить из файла Table.svelte. Точнее, значение этой переменной мы можем использовать в родительском компоненте, но главная задача противоположная. Главная задача эту переменную отправить обратно в Table.svelte.

Дополнительный пример связывания на Svelte

Структура файлов:

Main.svelte
..Calendar.svelte
..Table.svelte

В файле Main.svelte подключаются 2 других файла:
Calendar.svelte и Table.svelte.

В файле Main.svelte переменная инициализуется так:


let dones = [];

В файлах Calendar.svelte и Table.svelte переменная экспортируется:

export let dones;

Для передачи данных переменной dones из файла Calendar.svelte в Table.svelte мы связываем эти файлы в файле Main.svelte с помощью переменной bind:dones следующей конструкцией:

<Calendar bind:dones></Calendar>
<Table bind:dones></Table>

Теперь, если мы изменим переменную dones в файле Calendar.svelte, то она поменяется и в файле Table.svelte.

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — связывание компонентов"