vue 開發系列(九) VUE 動態組件的應用

業務場景

我們在開發表單的過程中會遇到這樣的問題，我們選擇一個控件進行配置，控件有很多中類型，比如文本框，下來框等，這些配置都不同，因此需要不同的配置組件來實現。

較常規的方法是使用v-if 來實現，這樣界面看上去比較復雜，而且需要進行修改主頁面。

解決方案

可以使用動態組件來實現，為了體現動態組件的特性，我們簡化實現方式，編寫兩個簡單的組件來測試一下這個功能。

文本組件配置：

<template>
  <div>
    我是單行文本框{{config.type}}
  </div>
</template>

<script>
  export default {
    name:"rx-textbox-config",
    props:{
      config:Object
    }
  }
</script>

<style>
</style>

這個組件我統一配置一個config 的對象屬性，配置一個type 屬性。

多行文本框配置：

<template>
  <div>
    我是多行文本框{{config.name}}
  </div>
</template>

<script>
  export default {
    name:"rx-textarea-config",
    props:{
      config:Object
    }
  }
</script>

<style>
</style>

這里我配置一個 name的屬性。

在調用界面做寫如下代碼，導入組件

export default {
  name: 'App',
  components: {
    rxTextboxConfig,
    rxTextareaConfig,
  }

使用動態組件：

 <component :is="currentConfig" :config="config"></component>

使用代碼切換組件

 this.currentConfig=ctlType +"-config";
      if(ctlType=="rx-textbox"){
          this.config.type="VARCHAR";
      }
      if(ctlType=="rx-textarea"){
          this.config.name="我是富文本框";
      }

這里寫if 只是為了體現這個特性，實際實現不用這種方式。