15 Feb 2017 • keywords: [ ]

vue动态组件

问题情景

直接上代码!

  <template>
    <div>
      <div v-if="type==1">
        <chart-a></chart-a>
      </div>
      <div v-if="type==2">
        <chart-b></chart-b>
      </div>
      <div v-if="type==3">
        <chart-c></chart-c>
      </div>
      <div v-if="type==4">
        <chart-d></chart-d>
      </div>
    </div>
  </template>
  import ChartA from 'pathA';
  import ChartB from 'pathB';
  import ChartC from 'pathC';
  import ChartD from 'pathD';
  export default {
    components:[ChartA,ChartB,ChartC,ChartD]
  }

诸如上述的情况，当一些逻辑相近的条件渲染，如根据type值做不同组件的显示。当条件越来越多，以后需要引入更多类似charta，chartb这样的组件时，整个模板代码片段就会越来越冗余,解决方法是通过监听type值的变化，动态注册组件，然后在做组件的渲染

dynamicComponent方法

  dynamicComponent方法(){
    var CHART_DICT = {
      1:ChartA,
      2:ChartB,
      3:ChartC,
      4:ChartD
    }
    if(this.type && CHART_DICT[this.type]){
      Vue.component('Chart', CHART_DICT[this.type]);
    }
  }

方法实现了根据type的值来动态注册对应的组件,如1对chartA,并且统一命名为chart.这种用法也可以给chart组件传递数据

注:该方法应在type被赋值或改变之后执行，否则可能会提示未注册组件的报错

template写法更新

  <template>
    <div v-if="type">
      <chart></chart>
    </div>
  </template>