【微信小程序入门到精通】— 事件处理中进行数据赋值以及传递参数

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

这篇文章我将为大家讲解在微信小程序中我们如何在事件处理中进行数据的赋值更改以及如何进行参数的传递。本篇文章从两种事件类型进行讲述（tap 和 input 事件）

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

---

一、tap 事件的数据赋值以及参数传递（bindtap）

在我们编写事件处理函数的时候，如果我们想要对以及定义的数据进行重新赋值我们该如何操作呢？如果我们在组件中绑定了参数，我们如何传递它呢？

接下来我们以 tap 事件为例介绍一下！

1.1 tap 事件数据赋值

老规矩先介绍一下函数，我们在事件处理函数中想要进行数据重新赋值的时候需要调用一个函数 → this.setData(dataObject)，接下来我们用一个例子来讲解

接下来我们实现每按一次按钮，count 数据就加一

• 打开 list.js ，在 data里面定义 count ，赋值为0

    /**
     * 页面的初始数据
     */
    data: {
    count:0
    },
  

• 在 list.wxml 里面创建一个按钮，并绑定事件

   <button type="primary" bindtap="datachange">加一button>
  

• 在 list.js 里面定义事件处理函数 datachange

     //定义 datachange 事件处理函数
   datachange(){  
      this.setData({
           count:this.data.count +1
      })
   },
  

• 效果展示

  

1.2 tap 事件参数传递

那么如果我们在给组件绑定事件的时候，如果在绑定一个参数的话，我我们如何在事件处理函数在的使用呢？接下来我们通过例子介绍一下参数传递

首先引入一个函数，在我们事件处理函数中，如何获取参数的数值呢？我们利用的是

• 在 list.wxml 刚才定义的按钮内绑定上参数 gjj（名称自定义）

   <button type="primary" bindtap="datachange" data-gjj="{{4}}">加一button> 
  

  我们在微信小程序中给组件绑定上参数的方式是利用属性 data- 名称={{数值}} 的形式，不能在我们处理函数名称后面打括号写上参数名称的形式进行参数绑定，在vue中可行，但是在微信小程序不可以！

• 在 list.js 定义事件处理函数 gjjconvey

    //定义 gjjconvey 事件处理函数
    gjjconvey(e){
    this.setData({
      count:this.data.count + e.target.dataset.gjj
    })
    },
  

  利用参数实现每按一次按钮，count 自加4

• 效果展示

  

---

二、input 事件的数据同步

前面我们利用 tap 事件进行了解读，那么我们的 input 事件是如何进行数据赋值的呢？

话不多说直接操作！

2.1 input 组件

首先我们简单介绍一下 input 事件，他就是我们的文本输入事件，我们的文本输入组件是 input ，构建含组件之后利用 bindinput 即可连接事件。

• 在 .wxml 里面构建 input 组件

  <input value="请输入您的姓名">input >
  

• 效果展示

  

• input 组件中的 value 属性值表示文本框初值（默认内容）

2.2 input 事件数据同步

接下来我们利用 input 组件进行数据同步的讲解，请诸位和我一起操作！

• 打开 list.js 定义数据 view

    data: {
    count:0,
    view:"我的姓名是："
    },
  

• 打开 list.wxml 构建 input 组件

   <input  value="{{view}}" bindinput="inputhandle">input > bindinput="inputhandle">input >  
  

• 在 list.wxss 里面进行 input 组件样式的更改

   input{
   border:1px solidrgb(192, 112, 156);
   padding: 6px;
   margin: 5px;
   border-radius: 3dx;
  }
  

• 在 list.js 构建事件处理函数

    //定义 inputhandle 事件处理函数
    inputhandle(){
    this.setData({
    view:e.detail.value
    })
  },
  

• 效果展示

  

• 可以很明显看到我们的 view 数据随着我们的文本输入改变而改变

---

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！