Passing variables to JS Compponent

Question

I've got this code in phtml file:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "livePriceComponent": {
                    "component": "LivePrice"
                }
            }
        }
    }
}

Now, I want to pass some config variables to the LivePrice component. How do I do it using the code above?

Answer 1

Simply add your config value to the component. But, should remember that the template is a json format template.

For example:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "livePriceComponent": {
                    "component": "LivePrice",
                    "configValue" : "<?php echo "Config Value Text"; ?>"
                }
            }
        }
    }
}
</script>

In your Js component, we can get this.configValue