CODEWITHSUNDEEP
javascripthtmlcssvue.js
learningMonk
learningMonk

Reputation: 1411

binding style into child component in vue

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;" /> 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?

Upvotes: 2

Views: 444

Answers (1)

awesomeflax
awesomeflax

Reputation: 28

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;"/>

Upvotes: 1

Related Questions