小程式開發過程中,編寫一個元件是很常見的.但是有時候,我們對這個元件進行操作的時候,希望能通過繫結的事件,進行提交我們的資料到伺服器上.那麼這時候,就需要我們建立自定義事件!

先看元件的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);
    
  },

回到除錯頁面,就可以看到每次點選的時候,觸發事件,控制檯都能打印出值