How to Pass Parameters in JS Magento2

Question

I have created one module where I want to pass Parameters using JS.

So I have followed as per below.

app/code/namespace/modulename/view/frontend/templates/index.phtml

<div class="example-element"  data-mage-init='{"namespace_modulename/example": {"config": "value"}}'>A single div</div>

app/code/namespace/modulename/view/frontend/web/example.js

define([], function(config){
    alert(config);
});

In Alert it should show value as a result but it is showing undefined. Am I doing anything wrong there?

Answer 1

this is the way to pass conf. from template to js component:

template

<div class="example-element"  data-mage-init='{"namespace_modulename/example": {"foo": "bar"}}'>A single div</div>

js component

define([], function () {
    return function (config, $element) {
        console.log(config);
        console.log(config.foo);
        console.log($element);
    };
});

output

see off docs - https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_init.html

Answer 2

Try this:

define([], function() {
    return function(config) {
        console.log(config);
    }
});