How to pass variable from phtml and how to get variable in require js file

Question

How to pass parameter form .phtml to require js file

Template file

<script type="text/javascript">
        require(['Namespace_Module/js/custom'], function () {
        });
</script>

JS file

define(['jquery'], function ($) {

//here need to get parameter

});

Answer 1

In your phtml file you can add a parameter as the code below.

<script type="text/x-magento-init">
{
   "*": {
        "Namespace_Modulename/js/myJs": {            
           "customVar": "<?= 'Your parameter'; ?>"
        }
   }
}
</script>

In you js file add below code.

define([
    'jquery',
    'mage/url'
], function ($, url) {
    'use strict';

    return function (config) {

      var customVar = config.customVar;
        console.log(customVar);
      }
});

In above code customVar is equal to you need to pass your parameter, you can pass multiple parameters to create a new variable.

I hope it helps!