template增强特性

类似vue的class绑定

例子：

当该组件接受一个参数isActive为true时，就会为view加上class:active。

例子：父组件

<template>
  <view>
  <!--直接将for中的item/index传入wx:style和wx:class中无法正常运行-->
  <view wx:for="{{list}}" wx:style="{{item.style}}">{{item.name}}</view>
  <!--将item/index传入包装组件中，再在包装组件内使用wx:style和wx:class进行样式和类名绑定-->
  <wrap wx:for="{{list}}" item="{{item}}"></wrap>
  </view>
</template>
  import {createComponent} from '@mpxjs/core'
  createComponent({
    data:{
      list:[
        {
          name: 'red',
          style: {
          }
        },
        {
          name: 'blue',
          style: {
            color: 'blue'
          }
      ]
    }
  })
</script>

子组件

<template>
  <view wx:style="{{item.style}}">{{item.name}}</view>
</template>
<script>
  createComponent({
    properties: {
      item: Object
    }
  })

例子：

通过使用保留的 <component> 组件，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

<template>
  <!--动态组件，此处的componentName为json中注册的usingComponents的key值-->
  <component is="{{componentName}}"></component>
</template>

<script>
  import {createComponent} from '@mpxjs/core'
  createComponent({
    data: {
      componentName: 'test'
    },
    ready () {
      setTimeout(() => {
        this.componentName = 'list'
      }, 3000)
    }
  })
</script>

<script type="application/json">
  {
    "usingComponents": {
      "list": "../components/list",
      "test": "../components/test"
    }
  }
</script>

除了小程序原生指令之外，mpx 基于input事件提供了一个指令 wx:model, 用于双向绑定。

例子：

<template>
  <view>
    <input wx:model="{{val}}"/>
    <input wx:model="{{test.val}}"/>
    <input wx:model="{{test['val']}}"/>
  </view>
</template>

<script>
  import {createComponent} from '@mpxjs/core'
  createComponent({
    data: {
      val: 'test',
      test: {
        val: 'xxx'
      }
    }
  })
</script>

wx:model对应的属性和事件

wx:model默认监听input事件使用value属性传值，如果我们希望改变默认行为，可以使用wx:model-prop和wx:model-event来定义wx:model对应的属性和事件：

父组件

<template>
  <customCheck wx:model="{{checked}}" wx:model-prop="checkedProp" wx:model-event="checkedChange"></customCheck>
</template>

<script>
  import {createPage} from '@mpxjs/core'
  createPage({
    data: {
      checked: true
    }
  })
</script>

子组件（customCheck）

<template>
  <view bindtap="handleTap">{{checkedProp}}</view>
</template>

<script>
  import {createComponent} from '@mpxjs/core'
  createComponent({
    properties: {
      checkedProp: Boolean
    },
    methods: {
      handleTap () {
        // 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐
        this.triggerEvent('checkedChange', {
          value: !this.checkedProp
        })
      }
    }
  })
</script>

如示例，当子组件被点击时，父组件的checked数据会发生变化

注意：由于微信的限制，如果事件名使用横线链接分割（如: ‘checked-change’），将不可以使用该feature。

示例：