将多个延迟加载的 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 延迟加载?
Vue3 中使用 defineAsyncComponent 延迟加载组件