How to style child component with passed values?

Question

I would like to send values for styling child component. In reality, one child registers these styles as user input and emits them to main component, then main component passes these parameters to another child - I am not sure if this is the right approach as I am still learning but this is what I have so far.

Parent component after receiving emitted data has these styles.

data() {
    return {
            active: [
                [600,'20px','Roboto'], // h1
                [400,'16px','Open Sans'] // p
            ]
        }
}

Parent template (passing values to child)

    <Content :active="active"></Content >

Child

export default {
  props: ['active'],
  data () {
    return {
      h1: 'Some title',
      p: 'Lorem ipsum dolor sit amet'
    }
  }
}

Child template

<template>
    <div>
        <h1>{{ h1 }}</h1>
        <p>{{ p }}</p>
    </div>
</template>

How can I style tags in child template with passed values? This should be the result... or is there a better end solution? There could be few more things added later like line height and margin.

 <h1 style="font-weight: 600 font-size: 20px; font-family: Roboto">

This is in docs

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

But I am not sure how can I pass values? This throws fatal error :D

<div v-bind:style="{ font-family: active[0][2] }"></div>

Tomer Tomer · Accepted Answer · 2017-12-17T13:24:44

The best way would be to create a style computed in the child element:

props: ['active'],
computed: {
    styles(){
      return { 
        //note the camelCase instead of '-' 
        'fontFamily': this.active[0][2],
         .....
      }
    }
}

and then in the template:

<div :style="styles"></div>

How to style child component with passed values?

1 Answers