父子组件传值-引申即注意问题

问题1 子组件获取父组件传值,需要调用接口,要合理使用watch属性

场景:父组件传递过来的值本身也是从其他页面传递过来,定义的时候给了一个初值.而子组件也定义了一个默认值

示例:

父组件定义:

data()
{
	return {
		// 商品分类id
		goods_class_id: 0,
	}
}

然后再挂载完城后获取值

// 挂载 --常用
  mounted()
  {
    this.goods_class_id = this.$route.query.goods_class_id
  },

传递给子组件

 <ShowInfo :goods-class-id.sync="goods_class_id" />

子组件接收

props:
  {
    goodsClassId: {
      type: [Number, String],
      default: 0
    }

  },

提示

注意这时候在组件生命周期内是获取不到传递过来的值的,因此需要watch

 // 监听
  watch:
{
  goodsClassId: {
    handler(value)
    {
      console.log('update' + value)

      if (parseInt(value) > 0)
      {
        this.goods_class_id = parseInt(value)

        this.getSingleGoodsClass({ goods_class_id: this.goods_class_id })
      }
    },
    deep: true,
    immediate: true
  }
},

通过代码可以看出,当满足条件,获取到传递过来的值以后,再调用接口