Всем привет. Работал с vue2 через cdn.
Есть 2 компонента и просто файл index.html
cars.js
motorcycles.js
index.html
cars.js
содержит:
const cars={
template:"<div>Тут машины</div>",
};
const app=Vue.createApp();
app.component('cars', cars));
app.mount('#my');
index.html
содержит:
<script type="module" src="cars.js"></script>
<div id="my"><cars></cars></div>
На данном этапе всё хорошо. Отображается "Тут машины".
Теперь мне нужно импортировать второй компонент в первый и там его использовать. Вот что я делаю.
Редактирую cars.js:
const cars={
template:"<div>Тут машины</div><motorcycles></motorcycles>",
};
const app=Vue.createApp();
app.component('cars', cars));
app.component('motorcycles', () => import('/motorcycles.js'));
app.mount('#my');
Не работает. Моя проблема в том, что незнаю как правильно импортировать второй компонент. Или как объявить о втором компоненте.
Сейчас там так:
motorcycles.js содержит:
const motorcycles={
template:"<div>Тут Мотоциклы</div>",
};
app.component('motorcycles', motorcycles));
Была идея сделать export default motorcycles;
Но не помогло. Так же не помогло и createApp если прописать в компоненте motorcycles.js.
Во второй версии Vue я бы сделал так: Vue.component('motorcycles', motorcycles));
и всё. И это работало бы. А как сделать на Vue3 это правильно?