Question

我正在尝试在Vue中创建一个通用表单字段，可以将其配置为使用各种不同的小部件进行输入。我想要一个输入目录，然后导入正确的输入并在我的组件中使用它。到目前为止，我甚至无法让导入工作。该组件的灵感来自于React的Winterfell库，它使用模式来配置表单。我正在使用Vue和标准的webpack加载器和JSX。

到目前为止，这是我简单的FieldValue组件。我希望能够动态导入一个组件，如./inputs/TextInput（或者按名称输入子目录中的任何其他内容）。

<script>

/* Schema format
    {
        id: 'ABCD',
        label: 'Some text',
        input: {
            type: theNameOfTheInputComponentToUse,
            options: {
                ...
            }
        }
    }
*/

var Inputs = require('./inputs');

export default {
    props: {
        schema: {
            type: Object,
            required: true
        }
    },
    render: function(h) {
        // let Input = Inputs[this.schema.input.type];
        let Input = require('./inputs/' + this.schema.input.type);
        if (!Input) {
            throw new Error('Unknown Input Type "' + this.schema.input.type + '". This component should exist in the inputs folder.');
        }

        return (
            <div class="form-group">
                <label for="{this.id}" class="col-sm-2 control-label">{this.schema.label}</label>
                <div class="col-sm-10">
                    {JSON.stringify(this.schema)}
                    <input schema={this.schema} />
                </div>
            </div>
        );
    }
};
</script>

当我尝试运行应用程序时，它将无法编译，我在控制台中收到以下错误：

This dependency was not found in node_modules:

* ./inputs

非常感谢任何有助于此工作的帮助！

Answer 1

模块导入在构建阶段已经解决，在代码实际运行之前已经解决，因此您可以理解您的错误。

您应该只导入所有可能的输入，然后根据this.schema.input.type确定要使用的输入。像这样：

const allInputs = {
  text: require('./inputs/text'),
  number: require('./inputs/number'),
}

const inputToUse = allInputs[this.schema.input.type]

在我看来，你已经有类似的东西，从行var Inputs = require('./inputs');和// let Input = Inputs[this.schema.input.type];

来判断

如何动态导入组件

1 个答案: