将样式绑定到vue中的子组件

Question

I have a child component. I want to bind inline style into that component. I want to pass these style properties( height: 200px; overflow-y: scroll).

I have tried by passing like this:

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

Then i have tried like this:

<Childcomponent:style="{'height': '200px'; 'overflow-y': 'scroll'}" /> it is also not working.

How to bind inline style to this child component?

Answer 1

Yo can do following:

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

If you want it to be done in your way, you have to create prop in your component, pass styles into it and then apply those on tag inside of your component.

Like that:

In Childcomponent file add

prop {
   myStyles: String;
   ...
}

Those styles you will use in tag you want (I believe, in root one). Then you can pass styles from parent in this way:

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