Question

组件之间的循环引用 Vue

2019-04-19

7328

vue.js dynamic components

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

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

这是我的 CompA.Vue

<CompB></CompB>

及其 脚本 ：

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>

及其 脚本 ：

 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 ，但问题是我无法从 CompB 调用 CompA 。我收到此错误： 未知自定义元素：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>

我已经看过这个问题。并阅读了此文档。我尝试仅显示导入，因为它会很长，我还使用了 CompA 而不是 v-comp-a 。这没有帮助。

请帮忙。我开始迷失了 :[

Answer 1

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

beforeCreate() 应该在 inside 您的导出默认值中
您正在 beforeCreate 钩子中导入 CompB ，因此删除其他导入
不要在 components

ComB

（最后一个括号后还有一个逗号，但我猜实际项目中不是这种情况）

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

保留 CompB.vue 原样，您应该会看到错误消失。

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

Answer 2

借助 Vue 3，您可以使用异步组件：

export default {
  name: "CompA",
  components: {
    "CompB": defineAsyncComponent(() => import('./CompB.vue'))
  }
}

文档：