embedding fashion within offspring component in vue

Question

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll.

I attempted passing it this way:

<Childcomponent style="height: 200px; overflow-y: scroll;" />

but had no luck.

Then I tried this:

<Childcomponent :style="{'height': '200px'; 'overflow-y': 'scroll'}" />

with the same disappointing result..

Is there a proper way to bind inline style to a child component?

Answer 1

Answer №1

Here is a suggestion for you:

<div style="height: 200px; overflow-y: scroll;">
   <Childcomponent />
</div>

If you want to customize it further, you can create a prop in your component and pass styles through it to apply on the tag inside your component.

For example:

In the Childcomponent file, add the following:

prop {
   myStyles: String;
   ...
}

You can then use these styles on the desired tag (typically the root one). To pass styles from the parent, do the following:

<Childcomponent my-styles="height: 200px; overflow-y: scroll;"/>

Answer 2

Here is a suggestion for you:

<div style="height: 200px; overflow-y: scroll;">
   <Childcomponent />
</div>

If you want to customize it further, you can create a prop in your component and pass styles through it to apply on the tag inside your component.

For example:

In the Childcomponent file, add the following:

prop {
   myStyles: String;
   ...
}

You can then use these styles on the desired tag (typically the root one). To pass styles from the parent, do the following:

<Childcomponent my-styles="height: 200px; overflow-y: scroll;"/>