Блог

Главная - Вопросы по программированию - Несколько экземпляров Vue привязываются к родительским и дочерним элементам

Несколько экземпляров Vue привязываются к родительским и дочерним элементам

#javascript #vue.js #webpack #instance

#javascript #vue.js #webpack #экземпляр

Вопрос:

Я хотел бы попросить наилучшую настройку экземпляров Vue (компонентов), когда я не хочу использовать SPA.

Мой HTML выглядит так:

 <html>
  <div id="layout">
    <div>Some Layout based content...</div>
    <div id="homepage">
      <simple-form-component></simple-form-component>
    </div>
  </div>
  <script type=text/javascript src="homepage.js"></script>
  <script type=text/javascript src="layout.js"></script>
</html>

В настоящее время у меня есть простой пример из двух .js файлов:

  • layout.js
  • homepage.js
 // layout.js

import Vue from 'vue/dist/vue.js'
new Vue({
    el: '#layout',
});
  
 // homepage.js

import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';

new Vue({
    el: '#homepage',
    components: {
        SimpleForm,
    },
});

Кажется, что все работает нормально, но я подозреваю, что это не на 100% правильно из-за ошибки консоли:

[Предупреждение Vue]: Неизвестный пользовательский элемент: — вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

(найдено в )

Есть ли у вас какие-либо идеи / опыт, как правильно настроить мой сценарий?

PS: Я хотел бы, чтобы мой JS был разделен на разные файлы, управляемые webpack и распространяемые серверной частью.

Спасибо, Марио

Комментарии:

1. Вы можете смонтировать Vue только на homepage и удалить этот div, если не хотите, чтобы ваша страница вела себя как SPA.

2. На самом деле да, в этом упрощенном примере, но представьте, что я хотел бы добавить некоторые компоненты (например, компоненты bootstrap-vue) также в макет .

Ответ №1:

Я нашел обходной путь v-pre , мой HTML изменит строку: <div id="homepage" v-pre> . Одна небольшая проблема заключается в том, что я не буду видеть свои компоненты в Vue Devtools.