时间戳

首页 > 解决方案 > 有自动导入动态组件的智能功能吗？

vue.js - 有自动导入动态组件的智能功能吗？

问题描述

如何动态导入动态组件？我找到了一些示例，但它们似乎是一种解决方法。我找不到明确的解释。

我像这样一个一个地导入它们：

Vue.component('account', () => import('../components/Account')
Vue.component('settings', () => import('../components/Settings')
// etc… one for each component

我的主要组件是这样的：

<component :is="componentName" :data="myData"/>

data: () => ({
  componentName: 'account'
})

有没有办法为第一个代码制定一个聪明的方法？

标签： vue.jsvue-component

解决方案

试试这个，改编自Laravel 源代码：

// replace './' with the relative path to your components
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], () => import(files(key))))

推荐阅读