Vue.js：在子组件中声明父组件

Question

我的应用程序包含一个组件：

export default {
  name: 'category',
  props: {
    ref: Object,
    asLabel: Boolean
  },
  components: {
    Products
  }
}

在“产品”组件中，模板具有：

<category :asLabel="true" :ref="ref"/>

在组件声明中：

components: {category}

此用法会引发错误：

custom element: <category> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

因此，我尝试在子组件内使用祖先组件。我有什么想念吗？

Answer 1

这是webpack / browserify阻止的。您需要使用异步导入将子组件中的父组件导入。像这样：

components: {
  category: () => import('./path-to-category/category.vue')
}

请阅读此处的文档以了解为什么会发生https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components。