So importieren Sie eine Komponente dynamisch

Question

Ich versuche, ein generisches Formularfeld in Vue zu erstellen, das für die Verwendung verschiedener Widgets für die Eingabe konfiguriert werden kann. Ich hätte gerne ein Verzeichnis mit Eingängen und importiere dann das richtige und verwende es in meiner Komponente. Bis jetzt kann ich nicht einmal den Import zur Arbeit bringen. Diese Komponente wurde von der Winterfell-Bibliothek für React inspiriert, die ein Schema zum Konfigurieren eines Formulars verwendet. Ich verwende Vue mit dem Standard-Webpack-Loader und JSX.

Hier ist meine einfache FieldValue-Komponente so weit. Ich möchte in der Lage sein, dynamisch eine Komponente wie ./inputs/TextInput (oder etwas anderes im Input-Unterverzeichnis nach Namen) zu importieren.

<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> 

Wenn ich versuche, die app es kompilieren, nicht zu laufen und ich erhalte den folgenden Fehler in der Konsole:

This dependency was not found in node_modules: 

* ./inputs 

Jede Hilfe diese Arbeit immer sehr geschätzt!

Answer 1

Modulimporte werden bereits während der Erstellungsphase aufgelöst, bevor der Code tatsächlich ausgeführt wird. Daher ist es verständlich, dass Sie diesen Fehler erhalten.

Sie sollten nur alle möglichen Eingaben importieren und dann basierend auf this.schema.input.type nur bestimmen, welche zu verwenden ist. Etwas wie folgt aus:

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

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

Es scheint mir, wie Sie bereits etwas ähnliches in Platz hatte, durch die Linien zu urteilen var Inputs = require('./inputs'); und // let Input = Inputs[this.schema.input.type];