自定义事件的激活与监听

自定义事件激活

自定义组件触发事件时，需要使用  triggerEvent  方法，指定事件名、detail对象和事件选项。

其中，like 表示自定的事件， behavior: status  表示  detail  对象，事件选项的属性不可以开发者自己定义，有bubbles、composed、capturePhase

// 激活
      let status = this.properties.like ? "like" : "cancel";
      this.triggerEvent('like', {
        behavior: status
      }, {});

自定义事件监听

自定义事件绑定在组件上，并触发相应的函数。

<v-like like='{{classicData.like_status}}' count='{{classicData.fav_nums}}' bind:like='onLike'></v-like>

点赞&取消点赞

新建一个新的组件 like ，引入 Http 类的目的是为了发送网路请求，且根据 like_or_cancel 值的不同，调用不同的接口，完成点赞与取消点赞。

import {
  Http
} from '../utils/Http.js';
class LikeModel extends Http {
  like(like_or_cancel, artID, category) {
    let url = like_or_cancel == 'like' ? '/like' : '/like/cancel';
    this.request({
      url: url,
      method: 'POST',
      data: {
        art_id: artID,
        type: category
      },
      success: (data) => {
        console.log(data)
      }
    })
  }
}
export {
  LikeModel
}

在classic组件中，引入 like 组件，并调用 like 方法。

// pages/classic/classic.js
// 引入ClassicModel类，并实例化一个对象
import {
  ClassicModel
} from '../../models/Classic.js';
import {
  LikeModel
} from '../../models/Like.js';
let classicModel = new ClassicModel();
let likeModel = new LikeModel();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    classicData: null
  },
  onLike: function(event) {
    console.log(event);
    let like_or_cancel = event.detail.behavior;
    likeModel.like(like_or_cancel, this.data.classicData.id, this.data.classicData.type);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    classicModel.getLatest((res) => {
      console.log('classic页面数据为：', res);
      this.setData({
        classicData: res
      })
    });

  }
})