Vue Application Development Series (nine) VUE dynamic components

Business scene

We will encounter in the process of developing a form of this problem, we select a control to configure, control has in many types, such as text boxes, and so on down the block, these configurations are different, requiring a different configuration components to achieve.

More conventional approach is to use v-if implemented this interface looks more complicated, and the need to modify the main page.

solution

You can use dynamic components. In order to reflect the dynamic characteristics of the components, we simplify the implementation, write two simple components to test this feature.

Text Component Configuration:

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

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

<style>
</style>

This component is a unified configuration I config object properties, configure a type attribute.

Multi-line text box configuration:

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

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

<style>
</style>

Here I configured a name attribute.

In the call to write the interface to do the following code, import component

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

The use of dynamic components:

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

Using the code switching component

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

Here write if only to reflect this characteristic, the actual implementation need not this way.