将多个延迟加载的 vue 组件子项导入 Parent

Posted 2023-02-23

【中文标题】将多个延迟加载的 vue 组件子项导入 Parent

【英文标题】：Import multiple lazy-loaded vue component children into Parent

【发布时间】：2019-12-16 05:29:56

【问题描述】：

我有许多使用相同子组件的组件。我试图通过在 .js 文件中导入所有组件来节省一些时间和代码，类似于在 vue 中使用 mixins。然后将该文件导入父组件。不幸的是，父组件无法识别这些导入的组件。似乎是一个简单的问题，但在实施时遇到了麻烦。

当我在父组件中记录 Children 时，我得到一个带有两个 vue 组件的组件对象，我只是不确定如何在父组件中使用它。我会在全球范围内导入它们，但并非每个组件都需要它们，因此效率不会很高。

我也觉得我将组件两次导入父级，但再次不确定如何实现这一点，所以尽管我会发布我到目前为止的内容。

感谢您的帮助

**Children**

    export default 
      components: 
        Popover: () => import('@/components/inline-components/popover'),
        Button: () => import('@/components/inline-components/button')
      
    


**Parent**

<template>
<Button>I am the Button</Button>
</template>

import Children from 'utilities/children'

export default 
    components: 
        Children
    

【问题讨论】：

如果你使用Children 作为一个mixin。喜欢mixins: [Children]？

哈哈，哇，这很有效，谢谢你，一直在我面前。谢谢！

发生在我们最好的人身上:)

【参考方案1】：

从 Husam Ibrahim 评论中发布答案。

**Children**

    export default 
      components: 
        Popover: () => import('@/components/inline-components/popover'),
        Button: () => import('@/components/inline-components/button')
      
    


**Parent**

<template>
<Button>I am the Button</Button>
</template>

import Children from 'utilities/children'

export default 
    // Add them as mixins instead of components
    mixins: [Children]