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

数据的双向绑定

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

场景一

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

1
2

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

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

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

场景二

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

1
2
3

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

1
2
3
4
5
6
7
8
9
10
11
12

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)"，这里需要注意，这种写法在小程序里面是错误的。

本文作者：IT-CRUD
原文地址：http://blog.itcrud.com/blogs/2020/08/weixin-mina-bind-event-02
版权归作者所有，转载请注明出处