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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容