在 vue 中动态导入实例？答案

【问题标题】：Dynamic import of an instance in vue?在 vue 中动态导入实例？
【发布时间】：2021-02-15 20:59:44
【问题描述】：

如何使用参数在 vue 中创建实例的动态导入？

我想将语言动态导入 flatpickr-vue。

import { de } from 'flatpickr/dist/l10n/de.js';

如何将“locale”参数动态带入导入路径？

<akaunting-date
...
      :config="{
            ...
            locale: '{{ language()->getShortCode() }}',
        }"
...
></akaunting-date>

Link to original code

<template>
    <base-input :label="title"
        :name="name"
        :class="[
            {'readonly': readonly},
            {'disabled': disabled},
            formClasses
        ]"
        :footer-error="formError"
        :prependIcon="icon"
        :readonly="readonly"
        :disabled="disabled"
        >
        <flat-picker slot-scope="{focus, blur}"
            @on-open="focus"
            @on-close="blur"
            :config="config"
            class="form-control datepicker"
            v-model="real_model"
            @input="change"
            :readonly="readonly"
            :disabled="disabled">
        </flat-picker>
    </base-input>
</template>

<script>
import flatPicker from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { de } from 'flatpickr/dist/l10n/de.js';

export default {
    name: 'akaunting-date',

    components: {
        flatPicker
    },

    props: {
        title: {
            type: String,
            default: '',
            description: "Modal header title"
        },
        placeholder: {
            type: String,
            default: '',
            description: "Modal header title"
        },
        readonly: {
            type: Boolean,
            default: false,
            description: "Input readonly status"
        },
        disabled: {
            type: Boolean,
            default: false,
            description: "Input disabled status"
        },
        formClasses: null,
        formError: null,
        name: null,
        value: {
            default: null,
            description: "Input value defalut"
        },
        model: {
            default: null,
            description: "Input model defalut"
        },
        config: null,
        icon: {
            type: String,
            description: "Prepend icon (left)"
        }
    },

    data() {
        return {
            real_model: this.model
        }
    },

    mounted() {
        this.real_model = this.value;

        if (this.model) {
            this.real_model = this.model;
        }

        this.$emit('interface', this.real_model);
    },

    methods: {
        change() {
            this.$emit('interface', this.real_model);
            
            this.$emit('change', this.real_model);
        }
    }
}
</script>

Link to original code

我认为我在正确的轨道上......

    computed: {
            config() {
                return {                
                    locale: require('flatpickr/dist/l10n/' + this.locale + '.js').default.en,
                }
            }
        },

现在我必须动态更改 .default 中的“.en”。这可能吗？

还没有完全动态，还有下面的错误信息，我看不懂

[Vue warn]: The computed property "config" is already defined as a prop.

【问题讨论】：

你试过类似import * as locale from `flatpickr/dist/l10n/${countryCode}.js`;
查看here 以获取let {hi, bye} = await import('./say.js'); 形式的动态导入，更多here
import * as locale from 'flatpickr/dist/l10n/${countryCode}.js'; 我试过了，可惜没有成功！
let {hi, bye} = await import('./say.js');我不知道怎么用

标签： javascript vue.js async-await vue-component es6-promise

【解决方案1】：

因为你想要的模块在运行时是未知的，你必须异步导入它，否则你的脚本将不得不等待文件被提取和解析..

如果你不想使用promise.then() 路由，那么你可以选择这个：

// do something with the 'locale module' once it is available
function sayHelloTo(locale, name) {
  console.log(locale.helloText + ' ' + name)
}

// get the module asyncly
async function loadLocale(countryCode, thenDoThis, ...optionalArgs) => {
  const locale = await import(`flatpickr/dist/l10n/${countryCode}.js`)
  thenDoThis(locale, ...optionalArgs)
})

loadLocale('DE', sayHelloTo, 'John') // runs asyncly

【讨论】：