微信小程序自定义组件传值无效问题

首先确认,接口拿到的数据是正确的
其次,确认组件的 properties 类型正确,可以正确接收到传入的属性.这时可以在 attached 生命周期中打印 this.properties.xxx来查看是否正确接收
既然可以正确接收到数据,为什么渲染时会出错呢?其实这涉及到组件生命周期的一点小问题.
我们在获取数据的时候,通常都是在Component 的 attached 生命周期中获取并计算的,而 attached 生命周期是在组件实例进入页面节点树时执行,那么这时我们就需要考虑一个问题.我们是数据是在组件实例进入页面节点树时就已经拿到了还是在进入页面节点树之后呢?如果组件实例在进入页面节点树的时候数据还没有拿到,那么组件是不会等待数据的,而是会依据已经设定的默认值来显示.而在上述问题中,组件传入的数据是通过接口异步获取的,数据的获取势必会需要耗费一定的时间,虽然不一定很久,但是可能在此期间组件就已经被加载渲染了,所以就会出现上面未评分的情况

问题解决
那么了解了问题的本质所在,我们就可以利用 properties 定义时的 observer 属性来解决这个问题.

observer 属性是属性值变化时的回调函数,也就是说,无论什么时候,只要传递的属性变化了,就会触发这个回调函数.那么我们就可以在这个回调函数中手动改变它的值,从而能让数据正确显示
 

properties: {
    goodsId: {
      type: String,
      observer: function(newval, oldval) {
        console.log("传过来的值",newval);
        this.getGoods(newval)
      this.getSpec(newval)
      }
    },
  },