在寫加入購物車功能時志电,需要實現(xiàn)點擊購物車按鈕骇笔,將子組件計數(shù)組件內(nèi)的num,物品數(shù)歸1竿拆,但是按鈕屬父組件宙拉,num屬性屬于子組件,那么需要使用父組件調(diào)子組件方法:
代碼如下:
- 父組件
<numBox :max_num="product_max_num" ref="numBox" ></numBox>
<button type="button" class="mui-btn mui-btn-danger" @click="add_shopcar" >加入購物車</button>
add_shopcar(){
//再將 數(shù)量選擇器的 num 歸 1丙笋,父組件調(diào)子組件的方法實現(xiàn)
this.$refs.numBox.changNum();
},
- 子組件
<template>
<div >
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="max_num" label="描述文字" size="mini" >
</el-input-number>
</div>
</template>
<script>
export default {
data() {
return {
num1:1
}
},
//父組件傳值接收
props:["max_num","num"],
methods: {
handleChange(value) {
// 暫時傳入購物車保存數(shù)量 讓加入購物后操作
this.$store.commit("setNumBoxCount",value);
//計數(shù) 建立和 store 中的count 數(shù)據(jù)監(jiān)聽
// this.getNum();
console.log(this.$store.state.count);
},
changNum(){
//點擊購物車后鼓黔,計數(shù)器歸1
this.num1=1;
}
},
}
</script>