如何使用传递的值设置子组件的样式？

Question

我想发送设置子组件样式的值。实际上，一个孩子将这些样式注册为用户输入并将它们发送到主组件，然后主组件将这些参数传递给另一个孩子 - 我不确定这是否是正确的方法，因为我仍在学习，但这就是我所拥有的远。

接收到发射数据后的父组件具有这些样式。

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

父模板（将值传递给子模板）

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

孩子

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

子模板

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

如何在子模板中使用传递的值设置标签的样式？这应该是结果......还是有更好的最终解决方案？稍后可能会添加更多内容，例如行高和边距。

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

这是docs

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

但我不确定如何传递值？这会引发致命错误：D

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

Answer 1

最好的方法是创建在子元素中计算的样式：

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

然后在模板中：

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