Передача props в корневой компонент Svelte

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

Я хотел бы знать, можно ли передать реквизиты самому корневому компоненту. Я пытаюсь создать модель с помощью Svelte и требую, чтобы некоторые переменные определялись за пределами App.svelte (т.е. переменные, которые назначаются на том же уровне, что и импорт bundle.js)


svelte svelte-3 svelte-component
person Gilgamesh Skytrooper    schedule 20.02.2021    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Есть 2 основных способа сделать это

Добавить данные в глобальную область видимости

Это позволяет использовать глобальную область действия документа для разделения значений между различными сценариями. Это в основном сводится к тому, чтобы просто объявить что-то в index.html, а затем использовать это там, где вы считаете нужным.

<!-- index.html -->
<script>
  document.myapp = {
    name: 'Svelte'
  }
</script>
<script defer src="build/bundle.js"></script>

// main.js
const app = new App({
    target: document.body,
    props: {
        name: document.myapp.name
    }
});

Я использую здесь main.js, потому что мне нравится держать все внешние неформальные в одном месте в своих приложениях, но теоретически вы можете использовать document.myapp.name где угодно, даже в качестве значения по умолчанию для магазина.

//store.js
export const name = readable(document.myapp.name)

Одна вещь, которую вы должны убедиться, это, конечно, то, что этот объект инициализируется перед запуском svelte-приложения (иначе все будет просто undefined или даже выйдет из строя)

Экспорт и вызов приложения

Второй подход состоит в том, чтобы не запускать ваше приложение прямо в main.js, а вместо этого вызывать его другой скрипт.

// main.js
import App from './App.svelte'
export default App

<!-- index.html -->
<head>
    <script src='/build/bundle.js'></script>
</head>
<body>
    <script>
        new app({
            target: document.body,
            props: {
                name: 'from App'
            }
        })
    </script>
</body>

В этом случае важно убедиться, что сценарий запускается после загрузки страницы и после загрузки пакета (здесь я решил это, добавив сценарий в тег body и удалив defer из пакета, я думаю, есть лучшие способы сделать это)

Еще одно важное замечание в связи с этим подходом заключается в том, что имя вашего приложения не обязательно является тем, что вы экспортировали из main.js, оно определяется в вашем rollup.config.js в выходной конфигурации как name (по умолчанию - app )

//rollup.config.js
output: {
  sourcemap: true,
  format: 'iife',
  name: 'app',
  file: 'public/build/bundle.js'
},
person Stephane Vanraes    schedule 21.02.2021