点击+,拿到文本框的值：如何实现加入购物车时候，拿到选择的数量

//需求：如何实现加入购物车时候，拿到选择的数量

//分析发现：

//1.按钮属于goodsinfo页面，数字属于numberbox组件

//2.涉及到了父子组件的嵌套了，所以就无法直接在 goodsinfo页面中获取到选中商品的数量

//3.如何解决的：就涉及到了子组件向父组件传值（事件调用机制）

//4.事件调用的本质：父向子传递方法，子调用这个方法，同时把，数据当作参数，传递给这个方法。

//在goodsinfo页面中

在data中return{}中添加

selectCount:1,//保存用户选中的商品数量，默认为一个

在methods中添加如下方法：

getSelectCount(count){//这个方法要传递给子组件，子组件调用
    //当子组件把选择购物的值传递给父组件过来时，把值保存到data上。
    this.selectCount=count;
    //父组件拿到的数量值
    console.log("父组件拿到的值："+this.selectCount);

}
要把这个方法传递给子组件调用，就这样写

<p>购买数量：
    <infoNumber  @getCount="getSelectCount"></infoNumber>
</p>
其中getCount方法要在子组件 goodsinfo_numer中定义，但是先分析：
子组件什么时候将值传递给父组件呢？
用文本框的changge方法监听自己的value值的改变
在goodsinfo_number.vue页面中

<input id="test" class="mui-input-numbox" type="number" value="1"
@change="countChanged" ref="numbox"/>

在input中添加了 ref="numbox",可以通过numbox引用对象，获取到input原生的Dom对象,可以通过它拿到value值
再在methods中添加方法：countChanged()

countChanged(){
    //每次当文本框的数据被改变的时候，立即把最新的数据，通过事件调用 传递给父组件
    console.log(this.$refs.numbox.value)//这里numbox是给它的一个属性
    this.$emit('getCount',parseInt(this.$refs.numbox.value));
},
注意：这里的change 是input自己本身的api,只需要绑定就好了，
getCount--->是在父组件中绑定的，子组件通过这个把parseInt(this.$refs.numbox.value)传递给父组件，父组件的
selectCount接收这个值的改变。