点击+,拿到文本框的值

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

//分析发现:

//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接收这个值的改变。




猜你喜欢

转载自www.cnblogs.com/hou-yuan-zhen/p/11583233.html