Несколько экземпляров Vue связываются с родительскими и дочерними элементами - PullRequest
0 голосов
/ 02 апреля 2019

Я хотел бы попросить о лучшей настройке экземпляров 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 warn]: неизвестный пользовательскийэлемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

(находится в)

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

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

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

1 Ответ

0 голосов
/ 02 апреля 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...