微信小程序MINA框架之事件绑定（二）

微信小程序事件绑定其实很简单，但是这里需要单独的拿出来说，主要里面涉及到如何获取数据，以及了解小程序中事件绑定的当前对象里面两个主要属性数据。

1. 数据的双向绑定

借用 vue 里面的一个说法，实现输入框输入的值，在另一个组件里面动态显示的场景，称为双向绑定，在 vue 中使用v-model，在微信小程序里面又如何使用呢，看下面两个场景。

1.1 场景一

首先需要创建输入框，为输入框绑定数据输入事件，当输入框中输入值的时候，在view组件中，实时显示输入框中输入的值。

<input bindinput="handleInput" /> <view>{{content}}</view>

Page({
  data: {
    content: "",
  },
  // 绑定的事件，e为当前的事件对象
  handleInput(e) {
    this.setData({
      content: e.detail.value,
    });
  },
});

上面的代码就实现了预期的功能，这里主要时对e进行一个说明，它的主要结构如下：

{
  "detail": {
    "value": "",
    "id": ""
  },
  "currentTarget": {
    "dataset": {
      "cname": "",
      "age": ""
    }
  }
}

在这个结构中有两个很重要的属性，分别是detail和currentTarget.dataset，其中detail里面是标签 value 属性，而在currentTarget.dataset中则是自定义属性，可以是任意的名称。这个示例是获取input标签本身 value 属性的值，因此直接从detail中取即可。

1.2 场景二

通过点击事件对输入框里的值做加一或者减一的操作。

<input value="{{result}}" />
<button bindtap="handleTap" data-num="{{1}}">+</button>
<button bindtap="handleTap" data-num="{{-1}}">+</button>

Pages({
  data: {
    result: 0,
  },
  handleTap(e) {
    // 从currentTarget.dataset中获取num值
    const num = e.currentTarget.dataset.num;
    this.setData({
      result: this.data.result + num,
    });
  },
});

从上面对currentTarget.dataset的解释，再加上这个示例，就可以更好的理解currentTarget.dataset作用。但是这里好像比较麻烦，为啥不在定义绑定方法的时候传入值的，如bindtap="handleTap(1)"，这里需要注意，这种写法在小程序里面是错误的。