Vue.js 组件发射答案

【问题标题】：Vue.js Component emitVue.js 组件发射
【发布时间】：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)获取优惠券，作为参数？

标签： vue.js components vue-component emit

【解决方案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);
  });
},

【讨论】：