时间戳

首页 > 解决方案 > 无法在 Loop 中定义 Vue 单文件组件 (CLI)，例如 app->A->B->A->B

loops - 无法在 Loop 中定义 Vue 单文件组件 (CLI)，例如 app->A->B->A->B

问题描述

我试图在循环中定义组件，即组件在循环中相互引用。

结构是这样的：

app(root) -> A -> B -> A -> B....,

但是，我收到错误消息：

[Vue 警告]：无法挂载组件：未定义模板或渲染函数。

应用程序.vue：

<template>
   <ComponentA></ComponentA>
</template>

<script>
import ComponentA from "./ComponentA.vue";

export default {
    name: "app",
    components: {
        ComponentA
    }
};
</script>

组件A.vue：

<template>
   <div>
      ComponentA
      <ComponentB></ComponentB>
   </div>
</template>

<script>
import ComponentB from "./ComponentB.vue";

export default {
    name: "ComponentA",
    components: {
        ComponentB
    }
};
</script>

CompoentB.vue：

<template>
   <div>
      ComponentB
      <ComponentA></ComponentA>
   </div>
</template>

<script>
import ComponentA from "./ComponentA.vue";
export default {
    name: "ComponentB",
    beforeCreate() {
        this.$options.components.ComponentA = require("./ComponentA");
    },
    components: { ComponentA }
};
</script>

问题：

我在我的应用程序中需要这个结构，如何使这个定义起作用？

笔记：

  1. 我正在使用 CLI，即单个 vue 文件组件，似乎 webpack 支持这一点，因为如果我使用 vue.js 作为插件，它可以工作，但不在 cli 环境中。

  2. 我也在componentB中尝试过这个，但没有工作：

    beforeCreate() { this.$options.components.ComponentA = require("./ComponentA"); }

  3. 递归组件正在工作，即组件在定义中引用自身，但在循环中相互引用的组件不起作用。

标签： loopsvue.jscomponentscommand-line-interface

解决方案

我自己已经弄清楚了： https ://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components

它应该是：

beforeCreate() {
    this.$options.components.ComponentA = require("./ComponentA").default;
},

推荐阅读