How to send data from Embedded lightning component back to Visualforce page?

Question

I am having trouble finding this information.

I am finding lots of stuff on communicating between a lightning component and Visualforce page when the Visualforce page is embedded inside the lightning component as an iframe, which involves doing postMessages and what not.

However, my situation is that I have a Visualforce page that I put a lightning component on.

I want the user to fill out the form in the lightning component, then click 'OK', and be able to get that info back on the Visualforce page. However, I am unsure how you perform this kind of communication. The Lightning component is not in an iframe when you embed it in a Visualforce page, so doing some complicated postMessage should not be necessary.

Answer 1

To communicate from the component to the VisualForce page, use a callback function. For example:

 <script>
 var someFunctionOnVFPage = function(param){
   alert(param);
 }

 $Lightning.createComponent('c:myComponent',
 {'callback':   someFunctionOnVFPage}, 
 function(cmp){});

In the component:

component.get('v.callback')('hey vf page!!');