Vue.js 组件发射

Question

我对组件 $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>

当我点击'confirm'按钮时，console.log显示'找不到优惠券'。如果我不使用该组件，它会起作用。

问题是什么？关于发射？

Answer 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);
  });
},

Vue.js 组件发射

Vue.js Component emit

components

emit

vue.js

vue-component