Question

我整个上午努力将数据从孩子们传回父母组件，但没有运气。所以我需要你的帮助，如何正确地做到这一点。

父组件

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

执行getBrainTreeNounce时，此方法通过$ emit

执行子组件功能

//methods
getBrainTreeNounce() {
  this.$emit('tokenize');
},

儿童组件

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
    });
},

我尝试了各种各样的事情，比如创建新事件和监听父组件或返回数据等等......但现在没有运气。那么有一些简单的方法可以将数据返回给我的父组件吗？

如果您有任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

这是一个在mount期间将数据传递给父级的子实例。你可以扩展为什么这不适合你吗？

＆＃13;

Vue.component('Child', {
  template: '#child',
	data: function() {
		return {
    	msg: "HELLO"
    }
  },
  mounted() {
  	this.$emit('onmounted', this.msg)
  }
})

new Vue({
  el: "#app",
  data: {
  	childMsg: null
  },
  methods:{
  	onChildMounted(msg){
    	this.childMsg = msg;
    }
  }
})

＆＃13;

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
  <Child @onmounted="onChildMounted"></Child>
  <h2>
    Parent hears <code>{{childMsg}}</code>
  </h2>
</div>

<script type="text/x-template" id="child">
<div id="child">
  <h2>
    Child says <code>{{msg}}</code>
  </h2>
</div>
</script>

＆＃13;

Answer 2

我已经弄明白了怎么做。在我的子组件中，我不得不调用它。$ 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)
    });
}

有没有一种简单的方法将数据从子元素传递到父组件？

2 个答案: