Проблема с циклическими ссылками в Vue.js - но только в CodeSandbox - PullRequest
Новая
       18

Проблема с циклическими ссылками в Vue.js - но только в CodeSandbox

0 голосов
/ 17 марта 2019

У меня есть приложение Vue.js (m4ops), и я разрабатываю общедоступный пакет Vue.js ( vfg-display-fields ), чтобы стать его частью. Поскольку это древовидная структура, пакет имеет пару компонентов, которые являются круговыми ссылками. Я решил эту проблему, используя методы из Vue.js Guide .

В моем пакете vfg-display-fields это работает хорошо, используя любой метод. Когда я публикую пакет и импортирую его в мой основной пакет m4ops, он также отлично работает любым из способов.

Проблема возникает, когда я пытаюсь продемонстрировать пакет в CodeSandbox (см. https://codesandbox.io/s/ykpj1jpxvv).

С первым предложенным методом я использую 

beforeCreate() {
  this.$options.components['vfg-display-fields'] = require('./DisplayFields.vue').default;
},

и в CodeSandbox я получаю ошибку: 

[Vue warn]: Unknown custom element: <vfg-display-fields> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Используя второй метод 

components: {
  'vfg-display-fields': () => import('./DisplayFields.vue'),
},

Я получаю ошибку 

proxyConsole.js:72 [Vue warn]: Failed to resolve async component: function vfgDisplayFields() {
      return _promise.default.resolve().then(function () {
        return require("".concat(function () {
          return require('./DisplayFields.vue');
        }));
      });
    }
Reason: DependencyNotFoundError: Could not find dependency: 'function () {
          return require('.' relative to '/node_modules/vfg-display-fields/src/DisplayGroups.vue'

Это только мой первый пакет, и я совершенно не знаком с Vue.js. Кажется, что мой пакет отлично работает в предполагаемом месте (мое приложение m4ops), но не в CodeSandbox Это моя ошибка или что-то в CodeSandbox?

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

За этот полезный пост Я понял, что проблема заключалась в том, что я опубликовал свой пакет как код ES6, а также использовал .vue файлы.Я должен был перенести их на ES5 для публикации.

Для меня есть еще много чего узнать.

0 голосов
/ 17 марта 2019

В DisplayGroups.vue вы используете компонент vfg-display-fields по имени пользовательского элемента, но этот компонент имеет имя DisplayFields. Основываясь на документации о рекурсивных компонентах , имя компонента должно совпадать с используемым в Vue.component(...).
В src / DisplayFields.vue вы должны написать 

export default {
  name: 'vfg-display-fields',
...

Или в src / index.js изменить имя компонента при его регистрации 

Vue.component('display-fields', DisplayFields);

и не забудьте изменить имя элемента в src / DisplayGroups.vue: 

<template>
  <div>
    <display-fields .../>
  </div>
</template>

Надеюсь, это поможет вам.

...