Question

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

结构如下：

name      date                         type       id
banana    2018-08-18 00:00:00           b          2

但是，我收到了错误消息：

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

app.vue：

df.loc[df['name'].str.contains("Apple"),'id'] = 1

ComponentA.vue：

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

CompoentB.vue：

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

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

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

问题：

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

注释：

我使用的是CLI，即单个vue文件组件，似乎webpack支持此功能，因为如果我将vue.js用作插件，则可以正常工作，但不能在cli环境中使用。
我也在componentB中尝试了此方法，但是没有用：

<template> <div> ComponentA <ComponentB></ComponentB> </div> </template> <script> import ComponentB from "./ComponentB.vue"; export default { name: "ComponentA", components: { ComponentB } }; </script>
递归组件正在运行，即，组件在定义中引用了自身，但是在循环中相互引用的组件不起作用。

Answer 1

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

应该是：

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

无法在循环中定义Vue单个文件组件（CLI），例如app-> A-> B-> A-> B

1 个答案: