Pass data between components

Question

Assuming I got 2 components like this: How can I pass data from 1 component to another?

In this example I would like to pass some data when I close the modal to "my-component"

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "my-component": {
                        "component": "XXX_XXX/js/component"
                    },
                    "my-modal" :{
                        "component": "XXX_XXX/js/modal",
                    }
                }
            }
        }
    }
</script>

HTML nesting of the elements

<div class="content col-12" data-bind="scope: 'my-component'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<div  class="modal" data-bind="scope: 'my-modal'">
</div>

and this is how the elements look like in the JS at least for now.

define([
    'jquery',
    'uiElement',
    'Magento_Ui/js/modal/modal',
    "ko"
], function (jQuery, uiElement, modal, ko) {
    "use strict";
    return uiElement.extend({})
})

I tired few things, like using the same scope would probably solve my problem but that would leave me with 1 component instead of 2.

Answer 1

You can get values from a ui component and adjust values using the uiRegistry This is done in a js file

define([
    'jquery',
    'uiRegistry',
], function ($, registry) {
    'use strict';
....
var uicomponent = registry.get(parentName + '.' + ns + '.' + path + '.' + key);
var value = uicomponent.val();
//adjustvalue 
uicomponent.val('new value');

You could also create links and imports if you want to link 2 values between ui components.

More details on this Here

If you want to get all the registered ui components to see there namespace you can do this

registry.filter(function(value,key) {
  console.log(key);
  console.log(value); 
 });

Since this is a big topic --> if you need more specific information please ask.