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

Posted

技术标签:

【中文标题】将多个延迟加载的 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]

【讨论】:

以上是关于将多个延迟加载的 vue 组件子项导入 Parent的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 vue-class-component 使用 Vue Router 延迟加载?

Laravel 从 vue 文件中混合延迟加载组件

Vue3 中使用 defineAsyncComponent 延迟加载组件

在 Vue 功能组件中使用动态导入

在 Laravel 应用程序中延迟加载 vue 组件 - 不加载

延迟加载组件