<template>
<div class="addSubtractButton">
<input v-model="quantity" type="number">
<div>
<a class="add" href="javascript:;" @click="handleAdd">+</a>
<a class="sub" @click="handleSubtract" :class="{disabled: quantity === 0, actived: quantity > 0}" href="javascript:;" >-</a>
</div>
</div>
</template>
<script>
export default {
data(){
return {
quantity: 0
}
},
name:'AddSubtractButton',
methods: {
handleAdd(){
this.quantity++;
this.$emit("update-quantity", this.quantity);
},
handleSubtract(){
this.quantity--;
this.$emit("update-quantity", this.quantity);
}
}
}
</script>
<style scoped>
.addSubtractButton input{
height: 30px;
width: 30px;
float: left;
text-align: center;
}
.addSubtractButton div{
width: 15px;
height: 30px;
float: left;
margin: 0;
padding: 0;
}
.addSubtractButton a{
text-align: center;
vertical-align: middle
this.$emit(“update-quantity“, this.quantity)子组件的值传给父组件
最新推荐文章于 2024-05-11 15:19:11 发布