Question

在尝试避免内联样式时，我试图使用对象来控制应用程序某些部分的样式。请问如何在下面的样式对象中使用props中的Color？

 data: () => ({   
         props: ['header', 'questions', 'index', 'colour'],
         sectionScore: [],  
         styling: {
             borderLeft: '10px solid ${this.colour}'
         }         
     }),

我在主体中使用的对象是：style =“ styling”。

Answer 1

首先，应将props选项声明为data选项之外的属性，其次，将styling属性定义为计算后的属性：

props: ['header', 'questions', 'index', 'colour'],
data: () => ({   
         
         sectionScore: [],  
              
     }),

computed:{
   styling(){
     return {
             borderLeft: `10px solid ${this.colour}`
         }
  } 
}

Answer 2

正如Boussadjra Brahim所说，应将props声明在数据外部，因为它与data属性无关。最好将styling定义为计算属性：

computed: {
    style_one() {
        return { border: `1px solid ${this.color}` }
    }
}

还有一个建议：预先定义传入的道具类型以及是否需要它们：

props: [
    header: {
        type: String,
        required: true
    },
    questions: {
        type: Array,
        required: true
    },
]

我如何将prop传递给Vue Js中的样式对象

2 个答案: