gpt4 book ai didi

vue-component - 如何动态导入组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:51:58 27 4
gpt4 key购买 nike

我正在尝试在 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

非常感谢您提供的任何帮助让这项工作顺利进行!

最佳答案

模块导入已经在构建阶段解决,在代码实际运行之前,所以您遇到该错误是可以理解的。

您应该只导入所有可能的输入,然后根据 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];

关于vue-component - 如何动态导入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41687041/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com