Question

我创建了两个组件（A和B）。我试图使它们递归。因此CompA调用ComB，CompB调用CompA，依此类推：

Page -> CompA -> CompB -> CompA -> CompB -> ...

这是我的 CompA.Vue

<CompB></CompB>

及其script：

import CompB from './CompB';
export default {
    name: "CompA",
    components:{CompB},
    props:['items']
 },
 beforeCreate() {
        this.$options.components.CompB = require("./CompB").default;
    },

这是 CompB.Vue ：

<v-comp-a :items="test"></v-comp-a>

及其script：

 import CompA from '../components/CompA'
export default {
    name: "v-comp-b",
    components:{'v-comp-a':CompA},
    props: {
        label: {
            typ:String,
            required:true
        },
        properties:{
            type:Array,
            required:true
        }
    },

因此，主页加载了CompA，我可以从那里调用CompB，但是问题是我不能从CompA调用CompB。我收到此错误： 未知的自定义元素：v-comp-a，您是否正确注册了组件？

我还已经将两个组件都导入了 App.Vue ：

import CompA from './components/CompA'
import CompB from './components/CompB'

和脚本中

components: {
   CompA,
   CompB
}

这是传递数据的主页：

<v-comp-a :items="items"></v-comp-a>

我已经看到了这个question。并阅读this documentation。我尝试仅显示导入内容，因为它会很长，因此我也使用了CompA而不是v-comp-a。它没有帮助。

请帮助。我开始失去它了：[

Answer 1

您有很多语法错误：在 CompA.vue 中：

beforeCreate()应该在默认导出内容内
您要在beforeCreate挂钩中导入 CompB ，因此请删除其他导入
不要在组件

ComB

（最后一个括号后面还有一个逗号，但我想实际的项目中不是这样）

export default {
  name: "CompA",
  props:['items'],
  beforeCreate() {
    this.$options.components.CompB = require("./CompB.vue").default;
  }
}

保持 CompB.vue 不变，您应该会看到错误消失。

现在它们是递归的，但是基本上 CompB 在 CompA 在 CompB 中...
因此，使它们递归应该给出递归错误

组件之间的循环参考Vue

1 个答案: