vue 子件向父组件传值和参数

昨天写程序,无意中遇到了vue子件向父组件传值的一个坑里,在此记录一下,提醒来人。

子组件触动父组件的事件传参,子组件如下:

<template>
      <div class="btncom">
        <van-button type="default" @click="clearorder()">清空</van-button>    
    </van-popup>
  </div>
</template>
<script>
export default { 
  methods: {
    clearorder() {
              this.$emit("getorderList", { flg: "1" });
     
    }
  }
};
</script>

父组件如下:

<template>
    <get-order
      ref="getorders"
      @closeTip="getorder"
      v-if="getoderflg"
      @getorderList="getPendingOrderList()"//都是()惹的祸
    ></get-order>
  </div>
</template>
<script>
export default {
  methods: {
    getPendingOrderList(obj) {
          if(obj){
            if(obj.flg=="1"){
              this.getoderflg=true;
            }
          }
        }
      });
}
    },
</script>

执行一下,obj为undefined,   为什么,仔细看了一遍,原来问题出在了

 @getorderList="getPendingOrderList()"//都是()惹的祸  ()身上。

1.不使用圆括号,event被自动当作实参传入。去掉(),问题解决。

2.使用圆括号,必须显式的传入event对象,如果不传入可能最终找到的是全局的window .event。

  @getorderList="getPendingOrderList($event)",问题解决。

 
posted @ 2019-11-05 09:54  zhouj2019  阅读(3184)  评论(0编辑  收藏  举报