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

HTML nesting of the elements

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

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

], 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.

1 Answer 1


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

], function ($, registry) {
    'use strict';
var uicomponent = registry.get(parentName + '.' + ns + '.' + path + '.' + key);
var value = uicomponent.val();
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) {

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

  • CompactCode to your service :D Mar 4, 2019 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.