小程序学习--自定义事件的激活和运用

小程序开发过程中,编写一个组件是很常见的.但是有时候,我们对这个组件进行操作的时候,希望能通过绑定的事件,进行提交我们的数据到服务器上.那么这时候,就需要我们创建自定义事件!

先看组件的js代码:

// components/like/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
      like:{
        type:Boolean,
        
      },
      count:{
        type:Number
      },
      readOnly:{
        type:Boolean,

      }
  },

  /**
   * 组件的初始数据
   */
  data: {
      // like:true,定义玩属性会初始化,之后就可以删掉
      // count: 99, 定义玩属性会初始化,之后就可以删掉
      yesSrc:'images/like.png',
      noSrc:'images/[email protected]'
  },

  /**
   * 组件的方法列表
   */
  methods: {
      // onlike方法,切换喜欢和不喜欢 引进自定义参数 event
      onlike:function(event){
        //自定义事件
        if(this.properties.readOnly){
          return
        }
        let like = this.properties.like;
        let count = this.properties.count;
        count = like?count-1:count+1;//like为false数量-1,为true数量+1
        this.setData({
          count: count,//上面的count赋值给这个count
          like:!like
        })
        //激活事件
        let behavior = this.properties.like ? 'like' :'cancel';
        this.triggerEvent('like',{//like为自定义事件名
          behavior: behavior,//behavior赋值
        },{})
      }

  }
})

我们把目光锁定到这里.

这是我在组件的JS中自定义的事件,并准备激活它,使用的方法是 this.triggerEvent 他有三个参数一个字符串两个JS对象

第一个参数是自定义事件的名字,也就是like

第二个参数是用来传递我们自己定义的属性behavior: behavior,

第三个参数一般不需要使用

现在我们已经在组件的JS中自定义了组件并激活,那么接下来去要调用这个组件的页面的js中去使用这个组件

不过首先,要在页面的wxml上,先调用到自定义时间的方法名,上面的自定义事件的方法名是like

所以我们在wxml的组件上绑定事件 bind:like="方法名",看下代码就知道:

<v-like class="like"  bind:like="onLike" like="{{likeStatus}}" count="{{likeCount}}"/>

可以看到我们绑定了一个事件,bind:like="onLike",like是我们的自定义事件名字,onLike是方法名,

接下来就是在页面的js中编写onLike的方法了:

onLike:function(event){
    console.log(event);
    
  },

回到调试页面,就可以看到每次点击的时候,触发事件,控制台都能打印出值

小程序学习--自定义事件的激活和运用

猜你喜欢