[WeChat applet entry to proficient] - data assignment and parameter transfer in event processing

foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

In this article, I will explain to you how to change the assignment of data in event processing and how to pass parameters in the WeChat applet. This article talks about two event types (tap and input events)

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

---

1. Data assignment and parameter transfer of tap events (bindtap)

When we write an event handler, what should we do if we want to reassign and define the data? If we bind the parameter in the component, how do we pass it?

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

1.1 tap event data assignment

The old rules first introduce functions. When we want to reassign data in the event processing function, we need to call a function → this.setData(dataObject). Next, we will use an example to explain

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

• Open list.js, define count in data, and assign the value to 0

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

• Create a button in list.wxml and bind events

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

• Define the event handler function datachange in list.js

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

• Show results

  

1.2 tap event parameter passing

So if we bind an event to a component, if we bind a parameter, how do we use the event handler? Next, let's introduce parameter passing through an example.

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

• Bind the parameter gjj (name customization) to the button just defined in list.wxml

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

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

• Define the event handler function gjjconvey in list.js

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

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

• Show results

  

---

2. Data synchronization of input events

We used the tap event to interpret it earlier, so how does our input event assign data?

话不多说直接操作！

2.1 input component

First of all, let's briefly introduce the input event. It is our text input event. Our text input component is input. After building the component, bindinput can be used to connect the event.

• Build the input component in .wxml

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

• Show results

  

• The value of the value attribute in the input component represents the initial value of the text box (default content)

2.2 Input event data synchronization

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

• Open list.js to define data view

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

• Open list.wxml to build the input component

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

• Change the style of the input component in list.wxss

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

• Building event handlers in list.js

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

• Show results

  

• It's obvious to see that our view data changes as our text input changes

---

Summarize

Everyone should be happy every day, let's study happily together!