component 动态渲染组件

component接受两个属性

<template>
  <view class="page-container">
    <view v-on:tap="handleElementClick"><text>组件改变</text></view>
    <component :is="currentComp" shrinkcomponents="comp,comp1"></component>
  </view>
</template>

<script>

class Index {
  data = {
    dataComp:'comp',
  }
  computed ={
    currentComp(){
      return this.dataComp === 'comp' ? 'comp1' : 'comp';
    }
  }
  methods = {
    handleElementClick (a,b) {
      console.log('handleElementClick',arguments,a,b)
      this.dataComp = (this.dataComp === 'comp' ? 'comp1' : 'comp')
    }
  }
}

export default new Index();

</script>

<script cml-type="json">
{
    "base": {
        "usingComponents": {
          "comp":"./comp",
          "comp1":"./comp1",
          "comp2":"./comp2",
          "comp3":"./comp3",
        }
    },
    "wx": {
        "navigationBarTitleText": "index",
        "backgroundTextStyle": "dark",
        "backgroundColor": "#E2E2E2"
    },
    "alipay": {
      "defaultTitle": "index",
      "pullRefresh": false,
      "allowsBounceVertical": "YES",
      "titleBarColor": "#ffffff"
    },
    "baidu": {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "white",
      "navigationBarTitleText": "index",
      "backgroundColor": "#ffffff",
      "backgroundTextStyle": "dark",
      "enablePullDownRefresh": false,
      "onReachBottomDistance": 50
    }
}
</script>

component 动态组件上同样支持绑定事件，传递属性；

比如

<component :is="currentComp" 
    type="upcaseEvent"  
    v-on:upcaseEvent="handleUpcaseEvent"
    :id="id"
    ></component>

Bug&Tips

注意 : 小程序端是通过条件判断来模拟component is的效果的，所以不要在component 标签上在在写c-if c-else c-else-if等条件判断