踩坑原因总结

其实在重写 WeUI 的过程中,主要是重写了一些组件,可能还没有遇到 mpvue 框架关于数据交互以及其他方面的问题,因此主要踩了两个坑,在下面声明一下:

1. 小程序原生组件事件绑定的写法

先举一个简单的例子,在小程序的原生组件中有 checkbox-group,picker,slider等等,以picker组件为例,它有一个类型为 EventHandlebindchange 属性,在小程序中的写法为:

  1. <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  2. <view class="picker">
  3. 当前选择: {{date}}
  4. </view>
  5. </picker>

但如果在 mpvue 中这样写的话,是不起作用的,而正确的写法是:

  1. <picker class="weui-btn" mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
  2. <button type="default">日期选择器</button>
  3. </picker>

从中可以看出两点要避免踩坑的:

  1. 对于一在小程序组件中为 Handler或者为EventHandle 的属性,在 mpvue 框架中要写成 vue 的事件绑定形式,就像:bindchange写成@change

  2. 对于一些在小程序中绑定值的属性,例如上面 picker 组件中的 value,在 mpvue 框架中要写成 :value="date"

2. 触发事件取值问题

还是举个简单的例子,slider组件有一个bindchange属性,它是完成一次拖动后触发的事件,那么如果我们想取对应的值该怎么操作。 在小程序中:

  1. event.detail = {value: value}

但在 mpvue中要这样写:

  1. event.mp.detail = {value: value}

从中可以很明显地看出区别,因此要避免踩的坑:

在触发事件后如果要获取对应的值,需要写成这样: e.detail.value