Vue.js中循环引用的问题 - 但仅限于CodeSandbox

Question

我有一个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中的内容？

Answer 1

在DisplayGroups.vue中，您可以使用自定义元素名称组件vfg-display-fields，但该组件的名称为DisplayFields。根据有关Recursive Components的文档，组件名称必须与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>

希望这对你有所帮助。

Answer 2

根据this helpful post我意识到问题是我已经将我的包发布为ES6代码，同时还使用了.vue文件。我应该将它们转换为ES5进行发布。

我需要学习更多东西。