Magento 2 : Pass argument/variable in component js

Question

I am using Magento2.2 . I want to pass variable in component JS from phtml file on frontend but don't know how ? I am using following code

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

Namespace/Modulename/view/frontend/template/web/js/customjs.js

define([
'jquery',
'ko',
'uiComponent',
'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend(function(config){      
      console.log(config);
      });
})

Please help me solve this problem. Any help would be appreciated.

Thanks in advance.

Answer 1

First you need to define your template in the JS file and pass variables from phtml.

In js:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo

        initialize: function () {
            //init function code here
        }
    });
})

and in PHTML:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.customInfo = 'variable';
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

If you have the information from backend block function , something like an array you can do as follows

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.configs = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>
</div>

And in JS

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo.**keyName**

        initialize: function () {
            //init function code here
        }
    });
})

where keyName should be the array key from the block

UPDATE You can do without window.... variables something like this:

return Component.extend({

        initialize: function (config) {
            var paramValue = config.parameter;
        }
    });

and in your PHTML:

<script type="text/x-magento-init">
{
    "#some-element-id": {
        "Namespace_Module/js/jsfilename": {"parameter":"value"} 
    } 
} 
</script>

Answer 2

The bellow work as a treat for me:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
  "#product-custom-info": {
        "Magento_Ui/js/core/app": {
        "components":{
          "custom-scope":{
            "component":"Namespace_Modulename/js/customjs",
            "myVar" : "My Value"
          }
        }
      }
  }
}
</script>

Then in customjs:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
        'use strict';
        return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },

        initialize: function (config) {
            console.log(config.myVar) //logs My Value
        }
    });
});