如何实现子组件向父组件传递数据？附代码求助

我太懂你折腾一早上的无奈了——Braintree的组件有时候确实得找对正确的交互姿势，其实实现起来没那么复杂，核心就是通过ref获取组件实例或者监听内置事件来拿到支付数据，比如你需要的payment method nonce。

下面给你两种靠谱的实现方式，选一种适配你现有代码的就行：

方法一：用Ref主动获取Drop-in实例（适配你当前的按钮触发逻辑） #

这种方式直接拿到组件实例，调用官方方法获取nonce，完美匹配你点击"Verify"按钮触发的场景：

1. 先给Drop-in组件加个ref标识：

<template>
  <dropin 
    ref="braintreeDropin"  <!-- 新增这行，用来定位组件实例 -->
    wrapperClass="constrain" 
    :authToken="authToken" 
    :collectCardHolderName="true" 
    :enableDataCollector="true" 
    :enablePayPal="true" 
  >
  </dropin>
  <button type="submit" style="padding-top: 1rem;" id="submitTransaction" @click="getBrainTreeNounce">Verify </button>
</template>

2. 完善getBrainTreeNounce方法，通过ref获取实例并调用官方API：

<script>
export default {
  methods: {
    async getBrainTreeNounce() {
      try {
        // 拿到Drop-in的组件实例
        const dropinInstance = this.$refs.braintreeDropin;
        // 请求支付方法，直接获取nonce和支付详情
        const { nonce, details } = await dropinInstance.requestPaymentMethod();
        
        // 这里就拿到你要的数据了！可以传给后端或者做后续处理
        console.log('支付Nonce:', nonce);
        console.log('卡片/支付详情:', details);
      } catch (error) {
        // 处理异常情况，比如用户取消支付、信息验证失败等
        console.error('获取Nonce失败:', error.message);
      }
    }
  }
}
</script>

方法二：监听内置事件自动获取数据 #

如果希望用户填完支付信息后自动拿到数据（比如选完PayPal或填完信用卡就触发），可以监听组件的paymentMethodRequestable事件：

1. 在Drop-in组件上添加事件监听：

<template>
  <dropin 
    wrapperClass="constrain" 
    :authToken="authToken" 
    :collectCardHolderName="true" 
    :enableDataCollector="true" 
    :enablePayPal="true"
    @paymentMethodRequestable="handlePaymentData"  <!-- 新增事件监听 -->
  >
  </dropin>
  <button type="submit" style="padding-top: 1rem;" id="submitTransaction" @click="submitTransaction">Verify </button>
</template>

2. 实现事件处理和提交逻辑：

<script>
export default {
  data() {
    return {
      paymentNonce: null,
      paymentDetails: null
    }
  },
  methods: {
    handlePaymentData(payload) {
      // 从事件参数里直接拿到nonce和详情，缓存起来
      this.paymentNonce = payload.nonce;
      this.paymentDetails = payload.details;
      console.log('自动获取到Nonce:', this.paymentNonce);
    },
    submitTransaction() {
      if (!this.paymentNonce) {
        alert('请先完成支付信息填写哦');
        return;
      }
      // 这里调用后端接口，把缓存的nonce传过去就行
      console.log('提交Nonce到后端:', this.paymentNonce);
    }
  }
}
</script>

几个关键注意点 #

• 确保你的Braintree Drop-in Vue组件是最新版本，旧版本的方法或事件名可能有差异；
• authToken必须是有效的客户端令牌，否则组件初始化失败，肯定拿不到数据；
• 两种方法可以结合用：比如用事件监听缓存nonce，点击按钮时再提交，这样体验更流畅。

你先试试第一种方法，和你现有代码结构完全适配，加个ref和完善方法就能解决问题，应该能快速搞定！

内容的提问来源于stack exchange，提问作者Valor_