uniapp官网教程视频,uniapp官网文档

  

  最近写评论组件,需要在二个页面、一个自定义组件之间传递、调用方法,当新增、删除评论时要通知父页面更新评论数量,也就是如何做到子页面数据更新后通知父页面也更新数据!   

  

  经研究,在导航大学中已经提供了事件频道来解决此类问题。在父页面的点击评论中写上更新评论数量的方法changeCommentsCount,之后此方法就传递到了评论。某视频剪辑软件中了(相当于)。   

  

  事件频道参考https://uniapp.dcloud.io/api/router?id=导航到   

  

  # practice.vue点击_评论(练习){ //点击评论图标后跳转到评论页面uni.navigateTo({ url: ' ./评论/评论?practice_id=' practice.id,events : { changecommentscount : function(RES){ console。log(' click _ comment change comments count : ',RES);练习。comments _ count=练习。comments _ count RES . data } },});},导航到评论。某视频剪辑软件页面后,再来一个方法changeCommentsCount并传递到自定义组件安歌-评论中去:   

  

  模板视图安歌-comments : practice _ id=' practice _ id ' @ changeCommentsCount=' changeCommentsCount '/安歌-注释/视图/模板脚本导出默认{ data(){ return { practice _ id :-1 } },onLoad(option){ this。practice _ id=选项。练习_ id控制台。日志('评论。vue practice _ id 3360 ',this.practice_id) },方法: { changeCommentsCount(_ datas){/# if $ scope.eventChannel//兼容APP-NVUE//# endif//# ifndef APP-NVUE const事件通道=this。getopenereventchannel();//# endif//控制台。日志('评论。vue changeCommentsCount emit’);事件频道。emit(' changeCommentsCount ',{ data : _ datas });} } }/脚本当安歌-评论增加评论或者删除时都会调用评论。某视频剪辑软件中的changeCommentsCount方法,以删除为例。   

  

  # agne-评论。vue _ DELETE(comment,callback){ let=this//DELETE/API/v1/users/: user _ id/practices/: practice _ id/comments/: id(。格式)API/v1/comments # destroy let to server URL=` $ { $ back host }/API/v1/users/$ { global data .$ user _ id }/practices/$ { this。practice _ id }/comments/$ { comment。id } ` uni。请求({ URL :到服务器URL,方法: '删除',成功: RES={//控制台。记录(研究数据。错误);if(参考数据。错误){ uni。显示toast({ icon : '错误',标题:分辨率数据。错误。join()| | '删除失败' });} else { console.log('删除成功' : ',评论。标题);//触发父组件中的评论数量更新函数,减少一个那个emit('changeCommentsCount ',-1) callback callback() } },fail: (res)={ console.log('错误:',RES);},完成:()={ } });},即上述代码中的   

  

  那个发出(' changeCommentsCount ',-1)然后此方法再调用练习。某视频剪辑软件中的changeCommentsCount,经过了两次调用!   

  

  实战评论页面删除一个评论,可以看到右下角已经调用了实践页面中的点击评论中定义好的方法changeCommentsCount,并正确的获取了数据数据: -1 .   

  

     

  

  状态管理也可以达到同样的效果,不过类似这种层次不多的,使用事件频道就能简单的解决。   

相关文章