Javascript 是否有一种简单的方法将数据从子组件传递到父组件？

整个上午，我都在努力将数据从孩子传递回家长组件，但运气不好。所以我需要你们的帮助，伙计们，如何正确地做到这一点

父组件

<template>
<dropin
        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>

created() {
    this.dropinCreate();
    this.$parent.$on('tokenize', () => {
        this.dropinRequestPaymentMethod();
    });
},
// now this method happens
dropinRequestPaymentMethod() {
    this.dropinInstance.requestPaymentMethod((requestErr, payload) => {
        if (requestErr) {
            this.errorMessage = 'There was an error setting up the client instance. Message: ' + requestErr.message;
            this.$emit('bt.error', this.errorMessage);
            return;
        }
        this.paymentPayload = payload;
        // got payload, now send it back to parent???
        $this.$emit('returnPayload', this.paymentPayload); //??
        return this.paymentPayload
    });
},

子组件

<template>
<dropin
        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>

created() {
    this.dropinCreate();
    this.$parent.$on('tokenize', () => {
        this.dropinRequestPaymentMethod();
    });
},
// now this method happens
dropinRequestPaymentMethod() {
    this.dropinInstance.requestPaymentMethod((requestErr, payload) => {
        if (requestErr) {
            this.errorMessage = 'There was an error setting up the client instance. Message: ' + requestErr.message;
            this.$emit('bt.error', this.errorMessage);
            return;
        }
        this.paymentPayload = payload;
        // got payload, now send it back to parent???
        $this.$emit('returnPayload', this.paymentPayload); //??
        return this.paymentPayload
    });
},

我尝试过各种方法，比如创建新事件、侦听父组件或返回数据等等。。。但现在运气不好。那么，有没有简单的方法将数据返回到父组件

---

如果您有任何其他信息，请让我知道，我会提供。谢谢大家!

我已经想好怎么做了。在我的子组件中，我必须调用它。$parent。$emit，所以现在我的函数如下所示

dropinRequestPaymentMethod() {
    this.dropinInstance.requestPaymentMethod((requestErr, payload) => {
        if (requestErr) {
            this.errorMessage = 'There was an error setting up the client instance. Message: ' + requestErr.message;
            this.$emit('bt.error', this.errorMessage)   ;
            return;
        }
        this.paymentPayload = payload;
        // I have added this line
        this.$parent.$emit('sendPayloadToParent', this.paymentPayload);
    });
},

mounted: function () {
    this.$on('sendPayloadToParent', function (payloadData) {
        console.log('caught in parent', payloadData)
    });
}

现在您可以像这样在父组件中获取数据

dropinRequestPaymentMethod() {
    this.dropinInstance.requestPaymentMethod((requestErr, payload) => {
        if (requestErr) {
            this.errorMessage = 'There was an error setting up the client instance. Message: ' + requestErr.message;
            this.$emit('bt.error', this.errorMessage)   ;
            return;
        }
        this.paymentPayload = payload;
        // I have added this line
        this.$parent.$emit('sendPayloadToParent', this.paymentPayload);
    });
},

mounted: function () {
    this.$on('sendPayloadToParent', function (payloadData) {
        console.log('caught in parent', payloadData)
    });
}

---

下面是一个在装载期间将数据传递给父级的工作示例。你能详细说明为什么这不适合你吗

Vue.component（'Child'{
模板：“#子项”，
数据：函数（）{
返回{
味精：“你好”
}
},
安装的（）{
this.$emit（'onmounted'，this.msg）
}
})
新Vue({
el:“应用程序”，
数据：{
childMsg:null
},
方法：{
onChildMounted（msg）{
this.childMsg=msg；
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
氢{
字体大小：粗体；
边缘底部：15px；
}

家长听到
{{childMsg}}
孩子说
{{msg}