Pass data into custom component

Is it possible to pass JSON data into a custom component? I would like to pass a JSON object into a custom component, the same way like how you can use the context variable with regular components.

I tried to convert (stringify) my JSON data, put it into a attribute and re-parse it in my custom component, but this feels like a work-around and I have to deal with escaping quotes.

For example, if I have this data:

my_data = {
  content: "<p>Lorum ipsum</p>",
  owner: {
    name: "Owner",
    phone: "123-45678"
  }
}

And I would like to put a custom component ‘owner badge’ beside the content. Is it possible to pass the owner data to the custom component? Think of it like this:

<owner-badge owner="my_data.owner"></owner-badge>

I don’t want to add each owner property to a separate attribute, because then I have to modify all occurrences of owner-badge when the owner data structure changes.

That is the only option in v5. In v6 it will allow to properly pass any kind of data without stringifying with props

1 Like