Vue.js 组件发射

Posted 2023-02-23

【中文标题】Vue.js 组件发射

【英文标题】：Vue.js Component emit

【发布时间】：2019-08-28 01:18:07

【问题描述】：

我对组件 $emit 有一些问题

这是我的子组件：

<template>
<div class="input-group mb-3 input-group-sm">
        <input v-model="newCoupon" type="text" class="form-control" placeholder="code">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" @click="addCoupon">comfirm</button>
        </div>
      </div>
</template>
<script>
export default 
  props: ["couponcode"],
  data() 
    return 
      newCoupon: this.couponcode
    ;
  ,
  methods: 
    addCoupon() 
      this.$emit("add", this.newCoupon);
    
  
;
</script>

这是父组件

<template>
  <div>
<cartData :couponcode="coupon_code" @add="addCoupon"></cartData>
</div>
</template>

<script>
import cartData from "../cartData";
export default 
  components: 
    cartData
  ,
  data() 
  return 
   coupon_code: ""
  
 ,
 methods:
   addCoupon() 
      const api = `$process.env.API_PATH/api/$
        process.env.CUSTOM_PATH
      /coupon`;
      const vm = this;
      const coupon = 
        code: vm.coupon_code
      ;
      this.$http.post(api,  data: coupon ).then(response => 
        console.log(response.data);
      );
    ,
 

</script>

当我点击“确认”按钮时，console.log显示“找不到优惠券”。如果我不使用该组件，它会工作。

有什么问题？是关于发射的吗？

【问题讨论】：

由于你在 data 属性中分配了 prop，我的第一个猜测是它是未定义的。为什么你有一个组件通过一个道具接收优惠券代码并让它通过一个事件发回相同的东西？

你为什么不从addCoupon(coupon)获取优惠券，作为参数？

【参考方案1】：

addCoupon() 
  this.$emit("add", this.newCoupon); // You emitted a param

// then you should use it in the listener
addCoupon(coupon)  // take the param
  const api = `$process.env.API_PATH/api/$
    process.env.CUSTOM_PATH
  /coupon`;
  const coupon = 
    code: coupon // use it
  ;
  this.$http.post(api,  data: coupon ).then(response => 
    console.log(response.data);
  );
,