如何動態導入組件

我想在Vue中創建一個通用表單字段，可以將其配置爲使用各種不同的小部件進行輸入。我想要一個輸入目錄，然後導入正確的輸入並在我的組件中使用它。到目前爲止，我甚至無法讓導入工作。該組件的靈感來自於使用模式來配置表單的React的Winterfell庫。我用標準的webpack加載器和JSX使用Vue。如何動態導入組件

這是我迄今爲止簡單的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

任何得到這個工作的幫助是非常感謝！

來源

2017-01-17 Brian

在代碼實際運行之前，在構建階段已經解決了模塊導入問題，因此您可以理解您正在獲取該錯誤。

您應該只導入所有可能的輸入，然後根據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];

來源

2017-01-17 09:15:12 mzgajner

感謝判斷。這與我需要提前註冊輸入目錄中的所有組件有關。使用require（'./ inputs'）仍然會導致構建錯誤。我改變它使用動態組件使用標籤，而不是JSX，它似乎工作。 – Brian

我相信'require（'./ inputs'）並不是一種自動的方式來導入目錄中的所有內容，但只會默認導入'./ inputs/index.js'。所以，您需要確保文件存在並導入所有其他文件。 – mzgajner

如何動態導入組件

回答

相關問題