自定义函数中会有一个带参函数返回一个promise,给调用页面，调用页面的then的事件用来接收组件页面点击了哪个按钮；
// 调用页面
this.assem = this.selectComponent("#assem");
this.assem.alert({
text: '标题',
}).then((res) => {
console.log(res)
// on close
})
Component({
assem: () => {},
options: {
multipleSlots: true
},
data: {
loading: {
confirm: false,
cancel: false,
}
},
properties: {
text: {
type: String,
value: ''
}
},
methods: {
alert(data) {
this.setData({
text: data.text
});
this.setData({
text: data.text
});
const {
confirm,
cancel
} = this.data.loading;
return new Promise((resolve, reject) => {
console.log(confirm, cancel)
if (confirm) {
resolve('success');
} else if (cancel) {
resolve('cancel');
}
}）
},
cancel() {
this.triggerEvent("cancel");
this.setData({
loading: {
confirm: true
}
})
},
confirm() {
this.triggerEvent("confirm");
this.setData({
loading: {
confirm: true
}
})
}
}
})
很疑惑 调用页面的 then 这里如何 处理
如何在用户点击下面两个函数时候 返回对应的信息
this.triggerEvent 会发生什么？
//父页面 wxml <alert id="assem"></alert> <button bindtap="showAlert">showAlert</button> // 父页面 js showAlert() { this.assem = this.selectComponent("#assem"); this.assem.alert({ text: "标题", }).then((res) => { console.log("res =>", res) }) } // 组件 wxml <block wx:if="{{isShow}}"> <view>text: {{text}}</view> <button id="confirm" bindtap="tapHandler">confirm</button> <button id="cancel" bindtap="tapHandler">cancel</button> </block> // 组件 js Component({ data: { text: "", isShow: false }, methods: { alert(options) { // options可以多个参数 return new Promise((resolve, reject) => { this.action = resolve wx.nextTick(() => { this.setData({ ...options, isShow: true }) }) }) }, action() {}, tapHandler(e) { this.action(e.currentTarget.id) this.setData({ isShow: false }) } } }) // 实现效果若认为该回答有用，给回答者点个[ 有用 ]，让答案帮助更多的人
this.triggerEvent("cancel")会触发你在页面定义的事件cancel
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6