商品数量组件间传值（MUI数量组件）

MUI  numbox(数字输入框)隶属于单独的一个公共组件，加入购物车按钮属于商品详情组件，底部tab栏属于单独的公共组件。

1、先将用户选择数量由数字输入框子组件传到商品详情父组件中

（点击加入购物车按钮拿到数字输入框的值）

商品详情父组件内：

 

 

 

数字输入框子组件内：

 

当点击+号、-号、及输入数量时都需要将数量值传给父组件，因此避免编写多个函数，只给文本框绑定一个change事件

 

 

 

 

 这样父组件就能拿到子组件传过来的数量值了。

2、父组件库存数量需要传给数字输入框子组件

商品详情父组件将库存数量传给数字输入框子组件，即为父传子，绑定属性即可

 

 数字输入框子组件接收父组件传过来的参数

然后子组件绑定父组件传过来的参数

 

然后点击加号发现最大值的设置不行， 然后在钩子函数中输出一下max,发现值为undefined

逆向推回去发现

父组件传递过去的库存数量是异步过去的，把数字输入框渲染后，库存数量还未获得，所以传递过去的得到undefined，所以最大值设置无效。解决：

监听max的值：

 

手动用js方式将newVal当做max的值 

将绑定的max删除

 

然后查看MUI官方API