Vueのアプリケーション開発シリーズ（9）VUEのダイナミックコンポーネント

ビジネスシーン

我々は、我々、設定するコントロールを選択し、この問題のフォームを開発する過程で遭遇する、コントロールはテキストボックスなど多くの種類、であり、かつそのブロックの下に、これらの構成は、達成するためのさまざまな構成部品を必要とする、異なっています。

より多くの従来のアプローチは、使用することですV-場合実装このインタフェースは、より複雑に見える、とメインページを変更する必要があります。

ソリューション

あなたは、動的コンポーネントを使用することができます。コンポーネントの動的特性を反映するために、我々は、実装を簡素化し、書き込み2つの単純なコンポーネントを、この機能をテストします。

テキストコンポーネントの設定：

< テンプレート> 
  < divの> 
    我是单行文本框{{config.type}} 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
  輸出デフォルト{ 
    名：" RX-テキストボックス-config設定" 、
    小道具：{ 
      設定：オブジェクト
    } 
  } 
</ スクリプト> 

< スタイル> 
</ スタイル>

このコンポーネントは、統一された構成のI configオブジェクトのプロパティは、type属性を設定しています。

複数行のテキストボックスの設定：

< テンプレート> 
  < divの> 
    我是多行文本框{{config.name}} 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
  輸出デフォルト{ 
    名：" RX-textareaの-config設定" 、
    小道具：{ 
      設定：オブジェクト
    } 
  } 
</ スクリプト> 

< スタイル> 
</ スタイル>

ここで私は、name属性を設定しました。

次のコードを実行するインタフェースを記述するための呼び出しでは、インポート・コンポーネント

輸出のデフォルト{ 
  名： 'アプリケーション'、
  コンポーネント：{ 
    rxTextboxConfig、
    rxTextareaConfig、
  }

動的コンポーネントの使用：

 < 成分は：である"currentConfig" = ：設定= "設定" > </ 成分>

コードスイッチングコンポーネントを使用して

this.currentConfig = ctlType + " -設定"; 
      （ctlType == "RX-テキストボックス"）{もし
          this.config.type = "VARCHAR"。
      } 
      （ctlType == "RX-TEXTAREA"）{もし
          this.config.name = "我是富文本框"。
      }

この特性、実際の実装の必要性はない。この方法を反映する場合にのみ、ここで書きます。