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

Posted 2023-02-23

【中文标题】如何使用传递的值设置子组件的样式？

【英文标题】：How to style child component with passed values?

【发布时间】：2018-05-31 00:41:09

【问题描述】：

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

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

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>

【参考方案1】：

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

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

然后在模板中：

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

【讨论】：

这在我手动设置计算样式时有效，如果我像你那样做我得到“渲染错误：“ReferenceError：未定义活动”。当我在模板中回显值时 - 活动[0 ][2] 它正确显示了值，所以我不认为这是错误的。也许计算属性会比传递值更早地尝试计算？

@IvanTopić 尝试使用this.active[0][2]。 active[0][2] 在模板中有效，因为不需要使用 this。

谢谢，它有效。 @fatman，您可以在答案中更改它吗？