Question

我希望根据某些条件动态添加父组件中的子组件。我想出了以下伪代码

for

我知道我们可以在父组件中注册所有组件，如：

If currentView == 'a'
    load component A1
    load component A2
ElseIf currentView == 'b'
    load component B2
    load component B3

但是我有很多这样的子组件，我需要在需要时只加载所需的组件。因此，最初加载所有组件是一种开销。

我在Vue Js中尝试了Dynamic components和async-components。所有动态组件都被完全加载，因此它不是我想要的。我不确定如何利用异步组件来实现这一目标。

我正在使用Laravel 5.4，VueJs 2.3.3和Webpack。

Answer 1

您可以组合异步组件和动态导入来实现此目的

Vue.component('foo', () => {
    if(currentView === 'a') {
      return import('./A1Component.vue')
    } else {
      return import('./B2Component.vue')
    }
})

要使用动态导入，您需要在Webpack中添加syntax-dynamic-import插件

Babel插件： https://babeljs.io/docs/plugins/syntax-dynamic-import/

Webpack插件： https://github.com/airbnb/babel-plugin-dynamic-import-webpack

Answer 2

安装所需的babel插件：

    int a[26] = {0};

在项目根目录中创建.babelrc，并在文件中包含以下简短代码：

npm install --save-dev babel-plugin-syntax-dynamic-import

使用这种方式导入后：

{
    "plugins": ["syntax-dynamic-import"]
}

最后运行npm build（vue-cli）或npm run watch（laravel）

Answer 3

嘿，我这个同样的问题用Google搜索了近4-5个小时。

分裂并没有像我预期的那样奏效。使用babel预设的es2015，在构建代码uglifier错误时，它在DEV服务器上运行得很好。在我建立它之后，它工作得很漂亮。我不认为你必须告诉webpack拆分代码，当你使用正确的导入类型时，它就是自动化的，那就是const Foo = () => import('./Foo.vue')类型

所有导入的导入都会创建一个分割点，如果你不希望它分裂，你可以在文档中采取额外的步骤是的，但它不是每个文件夹，而是每个文件因此，如果您有5个包含25个文件的文件夹，它将成为25个捆绑文件，并在需要时自动加载

这肯定会有所帮助 - https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

如何在VueJs中添加动态/异步/延迟组件

3 个答案: