0

Всем привет. Работал с 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 это правильно?

1 ответ 1

0

А документацию читал? А именно раздел Quick Start :: Without Build Tools

Добавлено для поддержки комментария

Если тебя интересует именно асинхронная версия загрузки компонента, то это выглядит вот так. 2й параметр может быть Promise'ом.

Vue.component('motorcycles',  async () => {
   const request = await fetch("/js/motorcycles.js");
   return await request.text();
});
6
  • Читал. И после этого начал переходить на vue 3. Но отличий не вижу. Вьюху подключил. Компоненты тоже. Но не работает система 19 мая 2022 в 14:38
  • Я щас сделал так: const cars={ template:"<div>Тут машины</div><motorcycles></motorcycles>", }; import motorcycles from 'motorcycles.js' const app=Vue.createApp(); app.component('cars', cars)); app.component('motorcycles', motorcycles); app.mount('#my'); motorcycles.js содержит: export default{ template:"<div>Тут Мотоциклы</div>", }; Тогда да работает 19 мая 2022 в 14:44
  • А если мне нужно в будущем использовать компонент motorcycles.js в качестве главного? Типо в index.html подключить просто файл motorcycles.js и вставить тег <motorcycles></motorcycles> это же ведь не сработает, выдаст ошибку, из-за того, что компонент не объявлен и нет createApp и.т.д. так как внем просто export default. Что тогда делать? В одном месте его нужно подключить в другой компонент а вдругом случае он сам является главным компонентом. Че делать? 19 мая 2022 в 14:50
  • const motorcycles={ template:"<div>Тут мотоциклы</div>", }; export default motorcycles; const app=Vue.createApp(); app.component('motorcycles',motorcycles); app.mount('#motorcycles'); Надеюсь такая запись решит сразу две мои проблемы) 19 мая 2022 в 14:55
  • Ты пойми что ты или собираешь компоненты на сервере и используешь компилятор в составе @vue/cli. Или работаешь с чисто клиентской частью, в таком случае подгрузка реализовывается на промисах. Есть ещё гибридная сборка, но там всё сложно. )))) Так на пальцах как это работает не пояснить.
    – Eugene X
    19 мая 2022 в 15:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.