13.vue父组件调子组件方法

在写加入购物车功能时，需要实现点击购物车按钮，将子组件计数组件内的num，物品数归1，但是按钮属父组件，num属性属于子组件，那么需要使用父组件调子组件方法:

代码如下：

• 父组件

<numBox :max_num="product_max_num"   ref="numBox" ></numBox> 
<button type="button" class="mui-btn mui-btn-danger" @click="add_shopcar" >加入购物车</button>
add_shopcar(){
          //再将 数量选择器的 num 归 1，父组件调子组件的方法实现
           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) {
      // 暂时传入购物车保存数量 让加入购物后操作
        this.$store.commit("setNumBoxCount",value);
        //计数 建立和 store 中的count 数据监听
        // this.getNum();
        console.log(this.$store.state.count);
      },
    changNum(){
      //点击购物车后，计数器归1
      this.num1=1;
    }

  },

}
</script>