组件Vue之间的循环引用

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 ... 因此，使它们递归应该会产生递归错误。