在VueJS中将父函数传递给子组件

我正在VueJS 1.0中练习,而且我正在学习组件.在这里example,有一个input元素,必须从API 提供coupon或某种类型的code.我必须验证.我有我的组件,并有道具when-applied.在when-applied必须调用父功能setCoupon,但它不会.

我只有这个错误this.whenApplied is not a function.

这是我的app.js档案

Vue.component('coupon', {
  template: '#coupon-template',

  props: ['whenApplied'],

  data: function() {
    return {
      coupon: '',
      invalid: false,
      text: ''
    } 
  },


  methods: {
    whenCouponHasBeenEntered: function() {
      this.validate();
    },

    validate: function() {
      if( this.coupon == 'FOOBAR') {
        this.whenApplied(this.coupon);
        return this.text = '20% OFF!!';
      }

      return this.text = 'that coupon doesn`t exists';
    }
  }
});

new Vue({
  el: '#demo',

  methods: {
    setCoupon: function(coupon) {
      alert('set coupon'+ coupon);
    }
  }
});

有人帮忙.建议非常感谢.

你应该bind属性:

或者您可以使用简写语法v-bind:

阅读更多关于props 这里的信息.