代码之家 › 专栏 › 技术社区 › user762579

Vue。js 2如何捕获子组件触发的事件?

vue.js

0

user762579 · 技术社区 · 8 年前

在付款中。vue组件,我想捕获子组件PayPalCheckout引发的事件。vue

PayPalCheckout。vue(子级)

methods: {
    ...
     onAuthorize(data, actions) {
      const vue = this;
      vue.$emit('paypal-paymentAuthorized', data);
      return actions.payment.execute().then((response) => {
        vue.$emit('paypal-paymentCompleted', response);
      });
    },
    onCancel(data) {
      const vue = this;
      vue.$emit('paypal-paymentCancelled', data);
    },
  },
  ...
 }

付款。vue。(父组件)

 export default {
   events: {
     'paypal-paymentAuthorized': function (data) {
       console.log('paypal-paymentAuthorized fired: ', data)
     },
     'paypal-paymentCompleted': function (data) {
       console.log('paypal-paymentCompleted fired: ', data)
     },
     'paypal-paymentCancelled': function (data) {
       console.log('paypal-paymentCancelled fired: ', data)
     }
   },
   ...

但我在控制台里什么都没有。日志为什么?

2 回复 | 直到 8 年前

1

jostrander 8 年前

您需要专门捕获父级中的事件,如下所示:

<child-component @paymentaccepted="someMethodOnParent"></child-component>

然后在子对象中可以发射:

methods: {
  onAuthorize(data) {
    this.$emit('paymentaccepted', data)
  }
}

2

0

user320487 user320487 8 年前

子组件可以通过 $parent 属性:

// PayPalCheckout.vue
onAuthorize(data, actions) {
  this.$parent.$emit('paypal-paymentAuthorized', data);
  return actions.payment.execute().then((response) => {
    this.$parent.$emit('paypal-paymentCompleted', response);
  });
},
onCancel(data) {
  this.$parent.$emit('paypal-paymentCancelled', data);
},

父级可以显式侦听这些事件:

// Payments.vue
export default {
  created () {
    this.$on('paypal-paymentAuthorized', data => {
      console.log('paypal-paymentAuthorized fired: ', data)
    })
    this.$on('paypal-paymentCompleted', data => {
      console.log('paypal-paymentCompleted fired: ', data)
    })
    this.$on('paypal-paymentCancelled', data => {
      console.log('paypal-paymentCancelled fired: ', data)
    })
  }
}