自定义事件的激活与监听
自定义事件激活
自定义组件触发事件时，需要使用 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
})
});
}
})
