E企盈营销工具技术服务商 热线:4006-838-530

微信小程序wepy框架中父组件与子组件通信和交互

E企盈直播平台营销卖货系统

官网上描述:$broadcast$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序。$emit$emit与$broadcast正好相反,事件发起组件的所有祖先组件会依次接收到$emit事件。$invoke$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。$emit例子:子组件中选择平台(‘全平台’, ‘爱奇艺’, ‘腾讯’, ‘优酷’),通知父组件此时选中的平台是谁,用来通知父组件控制指标是否可以被选中(当为全平台时,不可选中资源等级)子组件代码:picker @change=”bindPickerChange” value=”{{platformIndex}}” range=”{{platformArray}}”            view style=”display: flex;align-items: center”                view{{platformArray[platformIndex]}}/view                view class=”iconfont icon-xiajiantou” style=”margin-left:10rpx;font-size: 30rpx;color: gray” /view            /view /pickermethods = {    bindPickerChange (e) {        console.log(‘切换平台’)        this.platformIndex = e.detail.value        this.$emit(‘platformChoose’,this.platformArray[this.platformIndex]);    }  }data = {    platformArray: [‘全平台’, ‘爱奇艺’, ‘腾讯’, ‘优酷’],    platformIndex: 0,  };父组件代码:events = {    platformChoose(platform,event){        console.log(‘此时子组件选择的平台是’,platform)        this.platform = platform    }}当切换子组件中当平台时:当切换子组件中的平台为全平台,在父组件中选择指标会提示:$invoke例子:子组件中调用接口获取列表数据,负责控制页面正在加载的进度是否显示,用户在父组件内滑到底部触发加载下一页数据,在子组件页面显示子组件代码:block wx:for=”{{filmData}}” wx:for-item=”category” wx:key=”*this”        view style=”height:100px”{{category.name}}/view/block      view class=”weui-loadmore” hidden=”{{isHideLoadMore || filmData.length===0}}”        view class=”weui-loading”/view        view class=”weui-loadmore__tips”正在加载/view/viewdata = {      page: 1,      isHideLoadMore: true,      totalPage: 1,      filmData: []}onReachBottomCom() {    this.isHideLoadMore = false;    ++this.page;    if (this.page (this.totalPage / 10 + 1)) {        this.isHideLoadMore = true;        this.$apply();        wx.stopPullDownRefresh();    } else {        this.getlistData(); //获取下一页数据    }};async getlistData () {    try {      let apiParams = JSON.stringify({        ‘url’: ‘/listData’,        ‘method’: ‘POST’,        ‘params’: {           // *** 其他参数          ‘page’: this.page,          ‘pageLineCount’: 10,        }      })      let res = await api.api_post(apiParams)      console.log(‘listData 列表’,res)      if (!res.data.hasOwnProperty(‘status’)) {          let data = this.filmData.concat(res.data.listData)          this.filmData = data          this.totalPage = res.data.totalPage          this.$apply()      }    } catch (e) {      console.log(e)    }  };父组件代码:onReachBottom() {    this.$invoke(‘子组件名称’, ‘onReachBottomCom’, ”);};app.wepy: ‘window’: {    ‘onReachBottomDistance’: 400,}当在父组件内触底刷新时:当在父组件内调用子组件获取列的方法后,得到下一页数据:$broadcast例子:父组件某个变量发生改变,通知所有子组件执行某个方法,例当组件切换tabs时,当切换为全网大盘时,所有图表重新刷新显示:父组件代码:view class=”home page”     view class=”tabs-change”        view class=”tabs_item {{chooseShowPage===’全网大盘’?”:’click-color1′}}” bindtap=”typeChange(‘全网大盘’)”            全网大盘        /view        view class=”tabs_item {{chooseShowPage===’排行榜’?”:’click-color1′}}” bindtap=”typeChange(‘排行榜’)”            排行榜        /view    /view    i-toast id=”toast” /    grail :chooseShowPage.sync=”chooseShowPage” :tvType=”tvType” wx:if=”{{chooseShowPage===’全网大盘’}}”/    rankingList :tvType=”tvType” wx:if=”{{chooseShowPage===’排行榜’}}”//viewmethods = {    typeChange (type) {      this.chooseShowPage = type      this.updateShowPage()    }  };async updateShowPage () {    try {      await new Promise(resolve = {        setTimeout(() = {          resolve(‘async await test…’)            }, 1000)      })      this.$broadcast(‘chooseShowPage’, this.chooseShowPage)   //必须是异步执行广播事件,原理和小程序页面刷新和canvas重绘的先后机制有关,否则图表不显示      this.$apply()    } catch (e) {      console.log(e)    }  }子组件代码:events = {chooseShowPage (newValue) {          if (newValue===’全网大盘’) {              chart.setOption(this.option)          }      }  }

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序wepy框架中父组件与子组件通信和交互
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏