component 动态渲染组件

component接受两个属性

属性名说明
is接受一个计算属性作为动态渲染的标签名
shrinkcomponents接受 usingComponents 中的key值组成的字符串作为动态组件选择的范围
  1. <template>
  2.   <view class="page-container">
  3.     <view v-bind:tap="handleElementClick"><text>组件改变</text></view>
  4.     <component :is="currentComp" shrinkcomponents="comp,comp1"></component>
  5.   </view>
  6. </template>
  8. <script>
  10. class Index {
  11.   data = {
  12.     dataComp:'comp',
  13.   }
  14.   computed ={
  15.     currentComp(){
  16.       return this.dataComp === 'comp' ? 'comp1' : 'comp';
  17.     }
  18.   }
  19.   methods = {
  20.     handleElementClick (a,b) {
  21.       console.log('handleElementClick',arguments,a,b)
  22.       this.dataComp = (this.dataComp === 'comp' ? 'comp1' : 'comp')
  23.     }
  24.   }
  25. }
  27. export default new Index();
  29. </script>
  31. <script cml-type="json">
  32. {
  33.     "base": {
  34.         "usingComponents": {
  35.           "comp":"./comp",
  36.           "comp1":"./comp1",
  37.           "comp2":"./comp2",
  38.           "comp3":"./comp3",
  39.         }
  40.     },
  41.     "wx": {
  42.         "navigationBarTitleText": "index",
  43.         "backgroundTextStyle": "dark",
  44.         "backgroundColor": "#E2E2E2"
  45.     },
  46.     "alipay": {
  47.       "defaultTitle": "index",
  48.       "pullRefresh": false,
  49.       "allowsBounceVertical": "YES",
  50.       "titleBarColor": "#ffffff"
  51.     },
  52.     "baidu": {
  53.       "navigationBarBackgroundColor": "#ffffff",
  54.       "navigationBarTextStyle": "white",
  55.       "navigationBarTitleText": "index",
  56.       "backgroundColor": "#ffffff",
  57.       "backgroundTextStyle": "dark",
  58.       "enablePullDownRefresh": false,
  59.       "onReachBottomDistance": 50
  60.     }
  61. }
  62. </script>

Bug&Tips

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