Мне очень нравится Svelte, мне это намного проще для понимания, чем Vue. Думаю, в 65 лет мой мозг не может справиться со всем, как раньше.
Я планирую переписать свое Приложение погоды в аэропорту с Vue на Svelte и опубликовать результаты здесь. А пока создаю несколько полезных компонентов.
Я использую фреймворк W3.CSS (который мне также нравится, потому что это только css), но он не имеет ничего общего с работой моих компонентов, поэтому просто игнорируйте классы или замените их своими.
Несколько правил о компонентах Svelte
- Компоненты должны начинаться с заглавной буквы.
- Компоненты необходимо импортировать в родительский
- Компоненты могут принимать значение от родителя и возвращать его с помощью директивы bind:
W3input - мой первый компонент заключает тег HTML Input с меткой и вводом. По умолчанию type = ”text”, maxlength = 50, rows = 5. Он также может обрабатывать type = ”textarea” для многострочного ввода.
Все экспортированные переменные доступны элементу управления, переданному как свойства от родителя. Переменные без экспорта являются локальными для компонента. Если переменной присвоено значение, то оно будет значением по умолчанию, если не передано свойство.
Все свойства - это один путь к компоненту, за исключением значения bind:. bind: - специальный модификатор, который создает двустороннюю переменную.
Еще одна замечательная директива - $:. Это вычисляемая директива, в которой код выполняется каждый раз при изменении переменных. Так
$: if (!value) value = "";
обеспечивает преобразование неопределенного или нулевого значения в пустую строку.
Родительский компонент включает дочерний компонент как HTML-тег.
Опять же, при использовании bind: value имя и телефон будут обновляться при каждом нажатии клавиши в дочернем компоненте.
В следующем посте я покажу вам, как создавать группы переключателей и флажков в многоразовом компоненте Svelte. Это немного сложнее, но работает.
