DaZeng：小程序请求优化之数据监听与自定义组件

前言

为什么用到这个，大致就是比如从页面A中的一条数据跳到了这条数据的详情页，然后我把这条数据删了（增删改是一个道理），返回页面A，页面A要对原来这条数据做对应的修改，如果每次都在onShow的时候去请求数据就会造成很多的资源浪费，此时引出数据监听。

基础实现

首先对应要跳转的东西给他一个监听，告诉他去监听什么：

 <view class="cm-item" wx:for="{{vipList}}" wx:key="id" data-url="/pages/user/custManage/userManage/userManage?id={{item.id}}" bindtap="navigateurltap">

  //点击跳转
  navigateurltap: function (e) {
    var url = e.currentTarget.dataset.url;
    wx.navigateTo({
      url: url,
      events: {
        // 例如下个页面中监听到更改了用户的等级名字
        'changeName': (data) => {
          console.log('返回的数据', data);
          let temp = this.data.vipList.slice(0)
          let i = temp.findIndex((item) => item.id == data.id)
          temp[i].levelName = data.levelName
          this.setData({ vipList: temp })
        },
      }
    })
  },

在userManage页面中例如按钮点击的时候，打开一个叫changeName通信的通道，传递data：

<button class="btn-navbar" catchtap="doName">点击改名字</button>

  doName: function () {
  	let data = {
  		levelName:'新名字',
  		id:'0000001'
  	}
    app.emitOpenerEvent(this.getOpenerEventChannel(), 'changeName', data)
  },

组件实现

在基础实现中是直接触发了通信的数据从而监听，那如果包含组件呢？还是以更改名字为例子：
应用场景例如：在userManage页面中的一个按钮点击，弹出一个弹出框namePanel选择里面的名字，再进行更改。

userManage页面中：

<button class="btn-navbar" catchtap="showModal">点击显示名字模态框</button>

<!-- 自己封装的Model组件 -->
<nameMoadl showChangeNameModal="{{showChangeNameModal}}" bindradioTap="radioChange">		</nameMoadl>

showModal:function(){
	this.setData({
		showChangeNameModal:true
	})
}

在namePanel自定义组件中去处理radioTap事件，触发父组件的radioChange事件，并传递后面的obj的值：

 <label bindtap="radioTap" levelName='大曾' id='0000001'></label>

radioTap(e){
  const { levelName,id } = e.currentTarget.dataset
  this.triggerEvent("radioChange", { levelName,id, showChangeNameModal: false })
},

userManage中接受namePanel传过来的值进行名字的修改，并且关闭namePanel：

radioChange: function (data) {
  this.setData({
  showChangeNameModal:data.showChangeNameModal
  })
  app.emitOpenerEvent(this.getOpenerEventChannel(), 'changeName', data)
},

总结

记住一点就可以了，在哪里就做哪里的事：

• wx.navigateTo events 中监听的事件，接收返回的内容再处理
• app.emitOpenerEvent(this.getOpenerEventChannel(), ‘changeName’, data) 打开监听的通道，传值

自定义组件，不要妄想再组件内部修改properties的值，properties的值都是在哪里传进来就在哪里修改的，组件只能通知：

• 用 this.triggerEvent(“xxx”,{name:‘大曾’,value:‘007’}) 去触发父级的方法，传递改变的值给他，注意父级使用子组件对应事件就是 bindxx=“todoFn” ，在todoFn中去接受传来的data并处理。

扩充一点虽然自定义组件properties的值不能直接修改但可以被监听，例如刚刚的model组件可以监听他被打开与否然后就可以做对应的操作了。

  observers: {
    'showChangeNameModal': function (data) {
      console.log('data就是properties中showChangeNameModal的值',data)
    }
  },