双向绑定

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

例子：

  1. <template>
  2.   <view>
  3.     <input wx:model="{{val}}"/>
  4.     <input wx:model="{{test.val}}"/>
  5.     <input wx:model="{{test['val']}}"/>
  6.   </view>
  7. </template>
  9. <script>
  10.   import {createComponent} from '@mpxjs/core'
  11.   createComponent({
  12.     data: {
  13.       val: 'test',
  14.       test: {
  15.         val: 'xxx'
  16.       }
  17.     }
  18.   })
  19. </script>

wx:model并不会影响相关的事件处理函数，比如像下面这样：

  1. <input wx:model="{{inputValue}}" bindinput="handleInput"/>

wx:model对应的属性和事件

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

父组件

  1. <template>
  2.   <customCheck wx:model="{{checked}}" wx:model-prop="checkedProp" wx:model-event="checkedChange"></customCheck>
  3. </template>
  5. <script>
  6.   import {createPage} from '@mpxjs/core'
  7.   createPage({
  8.     data: {
  9.       checked: true
  10.     }
  11.   })
  12. </script>

子组件（customCheck）

  1. <template>
  2.   <view bindtap="handleTap">{{checkedProp}}</view>
  3. </template>
  5. <script>
  6.   import {createComponent} from '@mpxjs/core'
  7.   createComponent({
  8.     properties: {
  9.       checkedProp: Boolean
  10.     },
  11.     methods: {
  12.       handleTap () {
  13.         // 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐
  14.         this.triggerEvent('checkedChange', {
  15.           value: !this.checkedProp
  16.         })
  17.       }
  18.     }
  19.   })
  20. </script>

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

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

以及并不是所有的组件都会按微信的标准格式event.detail.value来传值，比如vant的input组件，值的抛出是用event.detail本身来传递的，这时我们可以使用 wx:model-value-path 来指定双向绑定时的取值路径。

例如：

  1. <vant-field wx:model-value-path="[]" wx:model="{{a}}"></vant-field>