Загрузите несколько компонентов в файл js, но используйте только один из них
Я учусь использовать среду svelte для создания компонентов. Но я не смог сделать экземпляр только одного компонента из тех, которые я загрузил в файл js.
Итак, это мой HTML-файл:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="./build/ReviewPanelComponent.js"></script>
</body>
</html>
Мой входной файл js (куда я импортирую компоненты):
import ReviewPanel from './ReviewPanel.html';
const reviewPanel = new ReviewPanel({
target: document.querySelector( 'body' ),
data:
JSON.parse(localStorage.getItem('rooms'))
});
export default {
components: {
reviewPanel,
}
}
И HTML для компонента:
<style>
#main{
background-color:white;
}
h3,
h4,
h5{
font-weight: bold;
}
</style>
<div class="container">
<div class="row">
<div id="main" class="col-xs-12">
<div id="title">
{{#if BookedRooms.length > 0}}
{{#each BookedRooms as br}}
<h3>{{br.Title}}</h3>
{{#each br.PossibleRateTypes as prt}}
<h4>{{prt.UUID}}</h4>
{{/each}}
{{/each}}
{{/if}}
</div>
</div>
</div>
</div>
Итак, в данный момент он загружает компонент, потому что у него есть экземпляр во входном файле js. Дело в том, что в данный момент, если мне нужен второй экземпляр, мне нужно создать один из файлов js. Я думал больше как просто импортировать все нужные мне компоненты в файл js и в html-файл, где я хочу их использовать, я бы просто назвал их.
Это возможно. Я читал документы, но не нашел того, что хочу.
РЕДАКТИРОВАТЬ: Я забыл сказать, что я также использую веб-пакет. Отсюда входные и выходные файлы. Мне удалось использовать несколько компонентов. Решение, которое я нашел, состояло в том, чтобы просто сделать это на моем входном файле js:
import ReviewPanel from './ReviewPanel.html';
window.ReviewPanel=ReviewPanel;
window.ReviewPanel2=ReviewPanel;
Я поместил импортированный объект в глобальную переменную, чтобы я мог вызывать его там, где я хочу, например:
<div id="reviewPanel"></div>
<script type="text/javascript">
// Creates the review panel component
window.ReviewPanel = new ReviewPanel({
target: document.querySelector('#reviewPanel'),
data:
JSON.parse(localStorage.getItem('rooms'))
});
</script>
Тем не менее, хотя у меня есть это решение, я ожидал бы импортировать его только один раз во входной файл js без необходимости полагаться на глобальные объекты, а затем просто вызывать его там, где мне это нужно, вот так:
// And passing the parameters
<ReviewPanel />
Хотя я мало что видел в React.js, именно так я обычно вижу программистов, которые делают это. Я ожидал того же. Тем не менее, так как у меня есть другие вещи, которые нужно сделать, я оставлю это сейчас так, чтобы потом оптимизировать.
Тем не менее, если кто-то знает, как это сделать, я весь слух, так как я новичок в Svelte, и там не так много информации, кроме документов, которые я считаю немного запутанными в тех же частях.