小程序自定义组件的引用以及如何在组件内的值发生变化时重新刷新组件值

业务场景：
活动页面维护产品，选择产品时没有要选择的产品跳转产品维护页，保存后回到选择产品页面刷新产品列表显示最新维护的产品。

1、选择活动产品

2、选择商品页面没有要选择的商品时，点新建按钮进入商品维护页面，维护完产品后返回该页面继续选择商品。

3、维护产品，保存商品后返回选择商品页。

活动维护页面：

json文件：

{
  "usingComponents": {
    //引用组件
    "selectPro": "/components/select-pro/selectPro"
  }
}

wxml文件:

//引用组件，一定要设置id
<selectPro id='selectPro' selectedPro="{{selectedPro}}" activityId="{{activityId}}"bind:myevent="getSelectedPro"></selectPro>

js文件:

Page({
	data:{
		selectedPro: []
	},
	onLoad:{
		//获得selectPro组件
		this.selectPro= this.selectComponent("#selectPro");
	},
	//获得选中产品
	getSelectedPro: function (e) {
	    var selectedPro = e.detail.selectedPro;
	    this.setData({
	      selectedPro: selectedPro
	    })
  	},
	refreshProList: function () {
		//调用组件方法,刷新组件列表
    	this.selectPro.selectProductList();
  	},
})

组件页面：

js文件:

Component({
	/**
   * 组件的属性列表
   */
	properties: {
    "selectedPro": { // 已选择商品id列表
      type: Array,
      value: ''
    },
    "statusBarHeight": {
      type: Number,
      value: 20
    }
  },
   /**
   * 组件的初始数据
   */
  data: {
    isShow: false,
    proList: []
  },
   // 在组件实例刚刚被创建时执行
  created: function () {
    
  },

  // 在组件实例进入页面节点树时执行
  attached: function () {
    console.log("attached:" + this.data.selectedPro);
  },

  // 在组件在视图层布局完成后执行
  ready: function () {
    this.selectProduct();
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //查询产品列表
    selectProduct: function () {
      let _this = this;
      wx.showLoading({ title: '加载中...', });
        wx.request({
          url: '/productList',
        data: {
          
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          _this.setData({
            proList: res.data
          })
        },
        fail: function() {
        }
      }) 
      wx.hideLoading();
    },
    toCreatePro: function(e){
      var proId = e.currentTarget.dataset.id || "";
      wx.navigateTo({
        url: "/createPro"
      });
    }
  }
})

产品维护页

js文件：

const app = getApp()
Page({
	data:{
	},
	onLoad: function (options) {
	
	},
	// 保存提交
  save: function () {
	 wx.request({
        url: '/save', 
        method: 'get',       
        data: {
        },
        success(res) {
		setTimeout(function () {
              wx.navigateBack({
                delta: 1,
                success: function (e) {
                  //获取上一级页面
                  var page = getCurrentPages().pop();
                  if (page == undefined || page == null) return;
                  	 //调用上一级页面函数刷新组件列表
                 	 page.refreshProductList();
                  }
              })
            }, 1000)
		}
  }
})