vue组件中使用scss，在不同的情况下使用组件，样式的值可以变怎么写？

Question

不同的地方引入组件的时候，组件的大小有些不同，其他样式都是一样的。请问这个时候应该怎么使用scss？

Answer 1

你可以在组件中

<Item :style="style"></Item>

props:['newStyle']
data(){
 return {
  style:{
      ....样式
      }
 },
 created() {
  this.style = Object. assign({},this.newStyle,this.style)
 }
}

Answer 2

写组件时候 定义一下样式绑定

举例子 :class="xxx==1?bigClass:smallClass" 组件

引入 确定xxx的值来决定样式

至于值的问题 就是组件通信 不细说

Answer 3

提供思路：在组件里接收:size ， 在父组件里把尺寸传进去；

Answer 4

为什么不用props来做呢？ 通过传递的props去给不同的样式

Answer 5

props接受style参数感觉是最好的。超高度可定制化

Answer 6

iview button 组件 你可以参考一下
`classes () {
return [

`${prefixCls}`,
{
  [`${prefixCls}-${this.type}`]: !!this.type,
  [`${prefixCls}-long`]: this.long,
  [`${prefixCls}-${this.shape}`]: !!this.shape,
  [`${prefixCls}-${this.size}`]: !!this.size,
  [`${prefixCls}-loading`]: this.loading != null && this.loading,
  [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}

];`